Flex Examples
I was playing around with the HSlider component tonight and was checking out the allowThumbOverlap property. The following example creates a horizontal slider with 2 slider thumbs and lets you toggle the allowThumbOverlap property with the showTrackHighlight property set to true.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/22/using-overlapping-slider-thumbs-in-the-flex-slider-controls/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function list_labelFunc(item:Object):String {
return Number(item).toFixed(2);
}
]]>
</mx:Script>
<mx:Number id="slider_thumbCount">2</mx:Number>
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="checkBox"
label="allowThumbOverlap"
selected="true" />
</mx:ApplicationControlBar>
<mx:HSlider id="slider"
allowThumbOverlap="{checkBox.selected}"
dataTipPrecision="2"
showTrackHighlight="true"
snapInterval="0.25"
thumbCount="{slider_thumbCount}"
tickInterval="1" />
<mx:List id="list"
dataProvider="{slider.values}"
labelFunction="list_labelFunc"
rowCount="{slider_thumbCount}"
width="{slider.width}" />
</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
hi,
This is really cool. I am very new to Flex, could you tell what has to be done in order to use this in a program.
Thanks,
Kiruthika
Kiruthika,
In Flex Builder, create a new Flex Project by selecting File > New > Flex Project from the main menu. Enter a Project name and click “Finish”. Copy and paste the code from above and paste into the MXML file in your Flex project. Finally, select Run > Run <project name> from the main menu to view the Flex application in a web browser.
Peter
Hi Peter,
I was wondering if you knew how to position the Thumbs so that they are at each end of the slider? For example on a single thumb slider you could use value=10.
Thanks,
jeff
Hey Peter,
Impressive! I am new to Flex too and was looking forward to customize my Hslider with two thumbs!
Thanks,
Urva
Hi ,I am using a Flex vslider with double thumb.I need a flex code which will change slider body color in such a fashion so that slider portion below lower thumb will show red color,above upper thumb will show green color and portion between two thumb will show orange color.Can u please guide me?
If snapInterval is 0.25, why in the allowThumbOverlap, I can’t bring the thumbs to a o.25 interval. They have a 0.5 minimum distance. Would prefer if someone has a solution to this
Hi pete,
In the function “list_labelFunc”, you have used a return statement like this ” return Number(item).toFixed(2)”. Which I didnt understand at first, then I exprimented with it. I tried using “return item.toString(); which did the same thing later i found, it was returning numbers without a decimal part as jus 1 or 2 or 3 and not as 1.00 or 2.00 or 3.00. So I later tried “return item.toFiexed(2)” now its returning the same value as that of “return Number(item).toFixed(2)”. What is the difference pete? Is it a best practise? or is there any other differences in behaviour which I am not noticing?
Thanks for all your nice examples.
kannan. R
Dear pete,
I also like to know when using multiple thumbs is it possible to highlight the labels of selected ranges… I mean if the first thumb is at 2 and the second thumb is at 5. Is it possible to highlight the labels from 2-5 from other labels?
thanks & regards,
kannan.r
Hi Kannan,
Please post if you find the solution.
-Munib
Hi All,
I am looking for similar thing. But, I don’t want to allow the Left side thumb cross the right side and vice versa.
Any solutions to this will be appreciated.
Regards,
Abhinav