JQuery Slider, how to make "step" size change
Is it possible to use the JQuery Slider (range slider / dual slider) to have non-linear (non consistent "step" size) values?
I want to horizontal Slider to look like:
|----|----|----|----|----|--------|--------|-------------------------|--------------------------|...
0 500 750 1000 1250 1500 2000 2500 75000 100000...
For example, I want to have the following JQuery 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;
}
The code above is not exactly working but the snap to grid functionality doesn't work.
Not sure if you want the slider scale to be in proportion to your values* but if so, I provided a solution to this for someone else who asked the same question. You can find my solution here. Basically I make use of the slide event that gets triggered when you move the slider to mimic the stepping, but based off a custom array defining the steps. This way it only allows you to "step" to your predefined values, even if they're not evenly spread.
*In other words if you want your slider to look like this:
|----|----|----|----|----|----|----|
0 10 20 100 1000 2000 10000 20000
then go with one of the other solutions here, but if you want your slider to look like this (diagram not to scale):
|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20 100 1000 2000 10000 20000
Then the solution I linked to may be more what you're after.
Edit: Ok, this version of the script should work with dual sliders:
$(function() {
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;
var value = findNearest(includeLeft, includeRight, ui.value);
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
$("#price-amount").html('$' + slider.slider('values', 0) + ' - $' + slider.slider('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;
}
});
Note that it looks a little funny down the far left end, since the jumps are so close together compared to the right hand end, but you can see its stepping as desired if you use your keyboard arrows to move the slider. Only way to get around that is to change your scale to not be quite so drastically exponential.
Edit 2: Ok, if the spacing is too exaggerated when you use the true values, you could use a set of fake values for the slider & then look up the real value this corresponds to when you need to use the real value (in a similar way to what the other solutions here suggested). Here's the code:
$(function() {
var trueValues = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var values = [0, 1, 2, 3, 4, 5, 6, 7, 10, 15, 20, 25, 30, 40, 50, 60, 75, 100];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 100,
values: [0, 100],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
var value = findNearest(includeLeft, includeRight, ui.value);
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
$("#price-amount").html('$' + getRealValue(slider.slider('values', 0)) + ' - $' + getRealValue(slider.slider('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;
}
function getRealValue(sliderValue) {
for (var i = 0; i < values.length; i++) {
if (values[i] >= sliderValue) {
return trueValues[i];
}
}
return 0;
}
});
You can fiddle with the numbers in the values array (which represent the slider stop points) until you get them spaced out how you want. This way you can make it feel, from the user's perspective, like it's sliding proportionally to the values, but without being as exaggerated. Obviously if your true values are dynamically created, you may need to come up with an algorithm to generate the slider values instead of statically defining them...
HTML:
<body>
<p>
Slider Value: <span id="val"></span><br/>
Nonlinear Value: <span id="nlVal"></span><br/>
</p>
<div id="slider"></div>
</body>
JS:
$(function() {
var valMap = [0, 25,30,50,55,55,60,100];
$("#slider").slider({
// min: 0,
max: valMap.length - 1,
slide: function(event, ui) {
$("#val").text(ui.value);
$("#nlVal").text(valMap[ui.value]);
}
});
});
One option for you is use a step size of one and reference an array containing your selected values. Start at 0, go up to 20, get array[value_of_slider] to get your actual value. I don't know sliders well enough to tell you whether or not there is a way to give it a custom set of values.
Based on the above answer and discussion from @Seburdis, and using the names from your example:
var prices_array = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 500, 1000, 1500, 2000, 2500, 5000, 10000];
function imSliding(event,ui)
{
//update the amount by fetching the value in the value_array at index ui.value
$('#amount').val('$' + prices_arr[ui.value] + ' - $' + prices_arr[prices_arr.length - 1]);
}
$('#slider-interval').slider({ min:0, max:values_arr.length - 1, slide: imSliding});