StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The posted solutions are totally workable, but here is another solution that requires no additional plugins and produces this (see <a href="http://jsfiddle.net/6zqFq/305/" rel="noreferrer">fiddle</a>):</p> <p><img src="https://i.stack.imgur.com/NFzMT.png" alt="a slider with simple labels"></p> <p>Here's how to do it:</p> <ol> <li><p>Initiate the slider.</p></li> <li><p>For each of the possible values, append a <code>label</code> element with <code>position: absolute</code> (the slider is already <code>position: relative</code>, so the labels will be positioned relative to the slider).</p></li> <li><p>For each <code>label</code>, set the <code>left</code> property to a percentage.</p></li> </ol> <h2>CSS</h2> <pre><code>#slider label { position: absolute; width: 20px; margin-top: 20px; margin-left: -10px; text-align: center; } </code></pre> <h2>JS</h2> <pre><code>// A slider with a step of 1 $("#slider").slider({ value: 4, min: 1, max: 7, step: 1 }) .each(function() { // Add labels to slider whose values // are specified by min, max // Get the options for this slider (specified above) var opt = $(this).data().uiSlider.options; // Get the number of possible values var vals = opt.max - opt.min; // Position the labels for (var i = 0; i <= vals; i++) { // Create a new element and position it with percentages var el = $('<label>' + (i + opt.min) + '</label>').css('left', (i/vals*100) + '%'); // Add the element inside #slider $("#slider").append(el); } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload