Slider with steps
Hi, I need to add a Slider to my app that moves in steps.
For example, the slider starts at 0, then I move to 20, then move to 40, and so on… this is the same functionality as the jquery slider: http://jqueryui.com/demos/slider/#steps
It seems the Titanium Slider doesn't support this feature according to the API docs right? or any idea how I could implement this on the slider 'change' event?
thanks for your help,
Diego
3 Answers
-
there are different ways to implement steps within sliders. one way is to set
slider.addEventListener('change',function(e){ var newValue = e.value + step; });it don't recommand this way since you may need to assign the slider value by an extern function. consider the following
slider.value = 3;this calls the change event and the new value would be 3+steps. in that way you get maybe results you're not interested in (ex you want steps by 5 or only even values).
the better way would be:
slider.addEventListener('change',function(e){ var newValue = parseValue(e.value,10); }); parseValue = function(value, value_to_round){ value /= value_to_round; value = Math.round(value); value *= value_to_round; return value; };in this example the slider value would be round to steps by 10. you could round to every other value too. (ex 5, 2, 100, 0.25, 0.5, 1). so you have "steps" realised by rounding the values. if you now assign a value the "correct" steps would be taken.
the assignment above (and steps by 5) would lead to the value 5 since 3 would be rounded to 5. or if you need even values you round to 2 and 3 would be rounded to 4.hope i could help
-
Yes, you'll need to modify it during the onChange event.
Just set the slider to min: 0 and max: 5 (or however high) and perform a multiplication of a variable during the onChange.
var valueslider = slider*20;
-
Here's what I did (rounding to nearest 10k):
currentAssetsSlider.addEventListener('change',function(e){ currentAssetsSliderLabel.text = numberFormat(Math.round(parseInt(e.value)/10000)*10000); });