Hi,

I am using the JQuery rangeslider by Andre Ruffert

I have been trying to set the parameters of the slider so that it changes the size of the 'step' once it reaches 36....

I want the minimum value to be 6, and the maximum to be 60 which I have set in the html code...

<input type="range" value="18" min="6" max="60" step="6" >

The step size should increase by increments of 6 until it gets to 36. When the slider reaches 36 the step size should increase by 12 ........ it should then snap to 48 and then 60 but instead it increases to 42, then 54 and 66!

So instead of going 6,12,18,24,30,36,48,60 (as it should do)

it seems to go..

6,12,18,24,30,36,42,54,66

the js code I have used is as follows...

2.     if (!$r.data().plugin_rangeslider)
3.       return;
4.     if (v>=36) {
5.       
6.       $r.data().plugin_rangeslider.step = 12;
7.     }
8.     else {
9.       $r.data().plugin_rangeslider.step = 6;
10.     }
11.   },
12.   onSlideEnd: function(p, v) {
13.     $('#val').attr('value', v)
14.   }

Does anyone know what I can do to ensure the step size increases where it is being told to and displays the correct amounts?

Check this Codepen which works in a similar way and you will see what I mean, just add the min & max amounts that i have mentioned above. I am using pretty much the same HTML/JS as this to get the correct step sizes.

Strangely enough, when i set my min value to 0 the slider then displays the correct values but this is not a good workaround.

Any help would be greatly appreciated

Thanks ​