NOUISLIDER - LIMIT VALUES

Pravesh Singh

Total Post:101

Points:709
Posted by  Pravesh Singh
JQuery 
 1503  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. Jayden Bell

    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

            }

        }

    });

     

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!