0 Replies Latest reply on Oct 8, 2010 1:58 PM by wjt1321

    Spark Sliders and Snapping/Stepsize

    wjt1321 Level 1

      I have been asked to create an app that allows the user to set a value one of two ways, through a slider and through a textbox. The reason for this is that they'd prefer to use a slider set to allow them to choose a number divisible by 5 between 0 and 100 (which is easy in and of itself, just set snapInterval to 5), BUT they would also like the ability to set it to a specific number, as it occasionally requires them to choose a particular number (such as 47).

       

      Most of the time, they will not need the ability to choose numbers not divisible by 5, it will only be about once every 2-3 weeks that they will need the functionality.

       

      I thought this would be easy, create a function to set the slider's value to that of the textbox whenever the textbox is changed.  However, if I do that, then the textbox text gets rounded to the nearest 5 (If I type in 22, it goes to 20).

       

      I tried setting the snapInterval="1" and stepSize="5" (and vice versa), but I cannot get it to work. Any ideas?

       

      Ideally, i would like the slider to just "pause" at 5, 10, 15, etc., but anything that would allow me to set the value to 1, 13, 17, etc. (while keeping the slider pausing or stopping on the 5s) would be great.

       

      The reason why I do not want the slider to be easily set to numbers that aren't divisible by 5 is that the slider is not very large (by necessity), so getting it to the exact number you need can be difficult.

       

      Here's an example of the code:

       

      <s:TextInput id="WeightA1Text" width="22" x="73.5" y="126" text="{WeightA1.value}" change="{changeWeightA1Text()}" />

      <s:HSlider skinClass="skins.HSliderSkinFill" x="10.5" y="150" showDataTip="true" minimum="0" maximum="100" stepSize="5" snapInterval="1" id="WeightA1" value="20" liveDragging="true"/>

       

      and changeWeightA1Text() is a function as follows:

       

      private function changeWeightA1Text():void{

       

       

           WeightA1.value = Number(WeightA1Text.text);

       

       

      }