Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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/