CODEWITHSUNDEEP
jqueryjquery-uisliderjquery-ui-slider
Kit Barnes
Kit Barnes

Reputation: 775

Range slider with arbitrary snap points

I have implemented the jQuery range slider on a webpage I am building, but it does not seem to be possible to make it snap to specific non-uniformly distributed values. Does any one know if this is possible with the jQuery slider or if there is an alternate I can use?

As a more concrete example, say I have a range from 0 to 100, and I have an array like [0, 7, 32, 61, 67, 90, 100]. I want the range slider to only be able to select the values in the array.

Upvotes: 1

Views: 3833

Answers (1)

mu is too short
mu is too short

Reputation: 434665

You can use the slide callback to limit the allowed positions:

Triggered on every mouse move during slide. The value provided in the event as ui.value represents the value that the handle will have as a result of the current movement. Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.

So you'd just need something like this:

var allowed = { 0: true, 7: true, /*...*/ 100: true };
$("#slider").slider({
    //...
    slide: function(event, ui) {
        if(!allowed[ui.value])
            return false;
    }
});

You could also use an array for allowed and return false when allowed.indexOf(ui.value) is negative; I think using an object reads better.

Demo: http://jsfiddle.net/ambiguous/eRtBa/

Upvotes: 4

Related Questions