Disable certain range in rangeslider.js

Question

I am using rangeslider.js and I am trying to disable the slider to slide below 20

<input type="range" class="range-slider" value="30" min="0" max="100" from="0" step="1">

I am using start attribute to make that work but it doesn't work that way.

here is the fiddle https://jsfiddle.net/moviecrew/awejnkof/16/

@VishnuBhadoriya if done that, it won't show the starting range either. i need the range to be visible but disabled so you can't slide below it. — Lucian, Nov 19 '19 at 12:30

score 2 · Accepted Answer · answered Nov 19 '19 at 12:27

2

if you set min attribute to 20 then it will create range slider value start from 20 or if you need value must start from 0 to 100 and prevent below 20 then you can try below solution

$('input[type="range"]').rangeslider({
  polyfill: false,
  onSlide: function(position, value) {
    if(value < 20){
    $('input[type="range"]').val(20);
    $('input[type="range"]').rangeslider('update', true);
    }
  }
});

answered Nov 19 '19 at 12:27

Vishnu Bhadoriya

1,655
1
20
28

This is exactly what i am looking for. You can see this implemented here https://jsfiddle.net/moviecrew/awejnkof/22/ Do you think the way it's implemented here, it's good? or have i done something wrong here? – Lucian Nov 19 '19 at 12:47
something is not right, at the first time, the slider goes past the range https://tppr.me/NQwoS and when i slide back to start position and again go, it works fine. https://tppr.me/7J0La https://jsfiddle.net/moviecrew/awejnkof/41/ latest fiddle here – Lucian Nov 19 '19 at 13:29

Disable certain range in rangeslider.js

1 Answers1