StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJQuery Slider, how to make "step" size change
text
Body
copied!<p>Is it possible to use the JQuery Slider (range slider / dual slider) to have non-linear (non consistent "step" size) values?</p> <p>I want to horizontal Slider to look like:</p> <pre><code>|----|----|----|----|----|--------|--------|-------------------------|--------------------------|... 0 500 750 1000 1250 1500 2000 2500 75000 100000... </code></pre> <p>For example, I want to have the following JQuery code:</p> <pre><code>var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000]; var slider = $("#price-range").slider({ orientation: 'horizontal', range: true, min: 0, max: 1000000, values: [0, 1000000], slide: function(event, ui) { var includeLeft = event.keyCode != $.ui.keyCode.RIGHT; var includeRight = event.keyCode != $.ui.keyCode.LEFT; slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value)); $("#price-amount").html('$' + ui.values[0] + ' - $' + ui.values[1]); return false; }, change: function(event, ui) { getHomeListings(); } }); function findNearest(includeLeft, includeRight, value) { var nearest = null; var diff = null; for (var i = 0; i < values.length; i++) { if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) { var newDiff = Math.abs(value - values[i]); if (diff == null || newDiff < diff) { nearest = values[i]; diff = newDiff; } } } return nearest; } </code></pre> <p>The code above is not exactly working but the snap to grid functionality doesn't work.</p>

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