Force Flex 4 Spark Hslider snap to certain values?

Question

I remember using values array on good old mx:HSlider, is there any workaround for s:HSlider?!

Basically I need slider to choose values between 300 and 2500 in following steps 300,500,1000,2000,2500.

<s:HSlider id="franchiser" 
   value="1500" 
   skinClass="components.HorizontalSlider" x="0" y="0" 
   minimum="300" maximum="2500" />

If not with this component, is there any alternative skinable slider out there?!

Thanks in advance!

Answer 1

The default HSlider does not have this functionality.

To accomplish this, you will need to create a class that extends HSlider and adds this functionality.

You can see an example of how to extend a Flex class here: http://blog.flexexamples.com/2008/09/08/extending-the-linkbutton-control-in-flex/

Answer 2

Extend, and on thumb drag or track click use pointToValue

to find your value as clicked and round to the nearest value you want it to snap to. This is better than the old snap behavior because you can do some cool things like logarithmic snapping (e.g. snap to 1,10,100,1000).

Answer 3

Here's a basic workaround (which could easily be put in a class), for those who might need it:

<fx:Script>
  <![CDATA[

    import mx.collections.ArrayCollection;

    [Bindable]
    private var sliderValues:ArrayCollection =
      new ArrayCollection([300,500,1000,2000,2500]);

  ]]>
</fx:Script>
...
<s:HSlider id="sldr"
  minimum="0" maximum="{sliderValues.length - 1}"
  stepSize="1" snapInterval="1"
  dataTipFormatFunction="{
    function():String
    {
      return sliderValues[sldr.value].toString();
    }}"/>

<s:Label text="{sliderValues.getItemAt(sldr.value)}"/>