Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

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,

— asked June 9th 2010 by Diego Gaitan
  • slider

3 Answers

  • there are different ways to implement steps within sliders. one way is to set

        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:

        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

    — answered July 21st 2011 by dev 1605
  • 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;

    — answered June 9th 2010 by Ryan Gartin
  • Here's what I did (rounding to nearest 10k):

    currentAssetsSliderLabel.text = numberFormat(Math.round(parseInt(e.value)/10000)*10000);
    — answered July 6th 2011 by Mike Davis
    1 Comment
    • numberFormat is a function I found. Thought I'd better include that too!

      // This function formats numbers by adding commas
      function numberFormat(nStr){
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1))
          x1 = x1.replace(rgx, '$1' + ',' + '$2');
        return x1 + x2;

      — commented July 6th 2011 by Mike Davis
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.