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.
<?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.
{ 4 comments… read them below or add one }
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?
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
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
@Dan
I think you will find your answer on this post here:
http://www.flextutor.org/flex-tips-suggestions/custom-tickinterval-and-snapinterval-in-a-flex-slider/