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.

View MXML

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

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.

    Thanks,
    Kiruthika

  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.

    Peter

  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.

    Thanks,
    jeff

  4. Hey Peter,

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

    Thanks,
    Urva

  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,
    kannan.r

  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.

    Regards,
    Abhinav

Comments are closed.