andreruffert / rangeslider.js

🎚 HTML5 input range slider element jQuery polyfill
https://rangeslider.js.org
MIT License
2.17k stars 401 forks source link

Slider step increase issue #133

Closed cjhill2015 closed 9 years ago

cjhill2015 commented 9 years ago

Hi,

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...

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...

onSlide: function(p,v) { if (!$r.data().plugin_rangeslider) return; if (v>=36) {

  $r.data().plugin_rangeslider.step = 12;
}
else {
  $r.data().plugin_rangeslider.step = 6;
}

}, onSlideEnd: function(p, v) { $('#val').attr('value', v) }

Do you 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...http://codepen.io/anon/pen/jEpKRw

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 ​

andreruffert commented 9 years ago

@cjhill2015 http://andreruffert.github.io/rangeslider.js/blog/#programmatic-attribute-changes