Is there a javascript (jquery) slider that limits values ​​regardless of the values ​​displayed?

Question

I want to have a slider with 0-100, but this can only be selected with 0-75 (for example)

An example looks something like this: the slider cannot enter the color area

It is clear that I would like to set the maximum, minimum, limit and value of the slider ...

As far as I can see, the custom jquery slider does not allow this out of the box. I expect that you can extend the basic behavior, but I will need a very clear hand to do this job!

Answer 1

You can use the slide event of the slider plugin, which is fired every time you move the mouse during the slide. Use ui.value to get the value of the current descriptor and check the maximum limit and return false. Returning false from this callback prevents the slide.

 $(".selector").slider({ slide: function(event, ui) { if(ui.value > 75){//Note the value of ui.value is between 0 to 99 return false; } } }); 

For the background color of the slider, you can easily achieve it via css.