Programmatically positioning tick marks on a slider control at Flex Examples

Nov

Programmatically positioning tick marks on a slider control

By peterd

Categories: Slider Tags: HSlider, Slider, tickValues, VSlider.

The following example shows how you can programmatically set tick positions on a Flex Slider control by setting the tickValues property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/03/programmatically-positioning-tick-marks-on-a-slider-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:HSlider id="slider"
            minimum="0"
            maximum="100"
            liveDragging="true"
            snapInterval="1"
            tickValues="[0,10,50,60,70,90,100]"
            dataTipPrecision="0" />

</mx:Application>

View source is enabled in the following example.

3 Responses to “Programmatically positioning tick marks on a slider control”

Feed for this Entry View blog reactions

1 Dan Nov 5th, 2007 at 1:03 pm

is there a way to progromatically set the snap interval. For example I want to have the slider have a minimum value of 1, but snap to multiples of 5?

2 peterd Nov 5th, 2007 at 6:46 pm

Dan,

This seems a bit weird, but I think it does what you’re looking for:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                if (evt.value > 0) {
                    slider.minimum = 0;
                    slider.value = evt.value - 1;
                } else {
                    slider.minimum = 1;
                    slider.value = 1;
                }
            }
        ]]>
    </mx:Script>

    <mx:HSlider id="slider"
            minimum="1"
            maximum="100"
            value="1"
            snapInterval="5"
            labels="[1,25,50,75,100]"
            liveDragging="true"
            dataTipPrecision="0"
            change="slider_change(event);" />

</mx:Application>

Peter

3 McKensy Apr 11th, 2008 at 8:50 am

Is ther ea way tos et custom icons instead of ticks? :S I’m trying to figure it but I’m sorry I’m unable to do it… thanks in advance