jQuery UI slider change step above certain values

I needed a way to change the step increments on my jQuery UI slider when the value was above a certain number.

For instance, I have a range slider from £0 – £2000. Steps of £10 increments are needed until the user slides up to £200, where the step should change to £100 increments.

jQuery Slider Change Step Above Certain Value

[code]
$(function()
{
var slider = $("#priceSlider").slider(
{
range: true,
min: 0,
max: 2000,
values: [0, 500],
step: 10,
slide: function(event, ui)
{
$("#priceRange").val("£" + ui.values[ 0 ] + " – £" + ui.values[ 1 ]);
// these if statements test the current value and change the step value accordingly
if ( ui.values[0] >= 200 ) $("#priceSlider").slider(‘option’, ‘step’, 100);
if ( ui.values[0] < 200 ) $("#priceSlider").slider(‘option’, ‘step’, 10);
}
});
// this populates the "human readable" input box:)
$("#priceRange").val("£" + $("#priceSlider").slider("values", 0) + " – £" + $("#priceSlider").slider("values", 1));
});
[/code]

This is part of a product filter / search I am developing for a current project. I will add a new entry for that when I’ve finished (and come back here to link to it!)




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *