Allow slider to slide between notches but lock onto closest notch.

[0xACCE55]

Hey, my slider contains only three notches but spans half the width of the screen. This means when dragging the slider a great amount of dragging is required before any visual UI changes take place. Is there any support to have the slider visually drag able freely but snap to the closest notch on update?

[IonDen]

Not supported from the box, but you can write external function which will do it. Demo: https://jsfiddle.net/IonDen/dpmf6L3t/

[0xACCE55]

Thanks for the example Lon, I am having some troubles getting this working with my code:

var $range3 = $("#slider1");
var slider;

$range3.ionRangeSlider({
    skin: "round",
    type: "single",
    grid: true,
    values: ['100T', '250T', 'Ultimate'],
    hide_min_max: true,
    from: 1,
    onFinish: function (data) {
        update(data.from);
    }
});

slider = $range3.data("ionRangeSlider");

function update(from) {
    var n = Math.round(from / 100);
        var num = n * 100;

        slider.update({
            from: num
        });
}

Any help is really appreciated!

[IonDen]

Hi, @MatthewK177 i see. This solution will not work with values array. Let me create another demo for you.

[IonDen]

Here it is: https://jsfiddle.net/IonDen/nezLw61d/