noUiSlider - limit values

Total Post:101

Points:709
JQuery 
 1939  View(s)
Ratings:
Rate this:

I have a slider with pips from 21 to 30 with 10 markers between the numbers (like a ruler) and I have a step size of 0.5. Is there a way to limit values, so the user cannot go under 21.5 but the marker starts from 21? I wouldn't listen to onchange, because I want to block dragging under 21.5.

Testlink: http://codepen.io/anon/pen/dPGgzK

$('#slider').noUiSlider({
    start: 21.5,
    step: 0.5,
    range: {
        'min': 21,
        'max': 31,
        '10%': 22,
        '20%': 23,
        '30%': 24,
        '40%': 25,
        '50%': 26,
        '60%': 27,
        '70%': 28,
        '80%': 29,
        '90%': 30,
        '100%': 31
    }
});
 
$('#slider').noUiSlider_pips({
    mode: 'range',
    density: 1
});

  1. Post:110

    Points:774
    Re: noUiSlider - limit values

    You should just be able to use the slider's slide event, for example

    $("#slider").on({
        slide: function(){
            if ($("#slider").val() < 21.5) { // if slided to somthing less than 21.5
                $("#slider").val(21.5); // set it to 21.5
            }
        }
    });

     

      Modified On Apr-09-2018 12:48:28 AM

Answer