Using overlapping slider thumbs in the Flex Slider controls

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"?>
<!-- -->
<mx:Application xmlns:mx=""

            private function list_labelFunc(item:Object):String {
                return Number(item).toFixed(2);

    <mx:Number id="slider_thumbCount">2</mx:Number>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                selected="true" />

    <mx:HSlider id="slider"
            tickInterval="1" />

    <mx:List id="list"
            width="{slider.width}" />


View source is enabled in the following example.

10 thoughts on “Using overlapping slider thumbs in the Flex Slider controls

  1. 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.


  2. 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.


  3. 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.


  4. Hey Peter,

    Impressive! I am new to Flex too and was looking forward to customize my Hslider with two thumbs!


  5. 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?

  6. 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

  7. 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

  8. 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,

  9. 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.


Comments are closed.