This is a big help. Thanks. You have been a great help. I´m from Uruguay and I needed use sliders from make a zoom in a column chart.

Do you have any ideas?

Thanks

Something like Doug McCune’s “Draggable Slider Component for Flex“?

Peter

Please help me in achieving the following:

“To drag the region between the thumbs, if the HSlider has two thumbs”.

Do we have any option in HSlider?

Or

Do i need to rewrite HSlider which will implement Slider?

Thanx in advance

~Anand

Something like the following should work:

<?xml version="1.0" encoding="utf-8"?>
<!-- main.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="add.png")]
            private var icon1:Class;

            [Bindable]
            [Embed(source="delete.png")]
            private var icon2:Class;

            private function style1():void {
                /* Short */
                StyleManager.getStyleDeclaration("HSlider").setStyle("thumbSkin", icon1);
            }

            private function style2():void {
                /* Long */
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration("HSlider");
                cssObj.setStyle("thumbSkin", icon2);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        HSlider {
            thumbSkin: Embed(source="add.png");
            dataTipPlacement: right;
            dataTipOffset: 0;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="icon 1" icon="{icon1}" click="style1();" />
        <mx:Button label="icon 2" icon="{icon2}" click="style2();" />
    </mx:ApplicationControlBar>

    <mx:HSlider id="slider" sliderThumbClass="BulletThumbClass" />

</mx:Application>

/** BulletThumbClass.as */
package {
    import mx.controls.sliderClasses.SliderThumb;

    public class BulletThumbClass extends SliderThumb {
        public function BulletThumbClass() {
            super();
        }

        override protected function measure():void {
            super.measure();
            measuredHeight = minHeight;
            measuredWidth = minWidth;
        }
    }
}

Hope that helps,
Peter

PS: Thanks to Ronzoni’s comments above for the measure() trick so you don’t have to hard-code icon dimensions.

HSlider {
            thumbSkin: Embed(source="assets/bug.png");
            dataTipPlacement: right;
            dataTipOffset: 0;
        }

I wan’t dynamic change the thumbSkin by coding.How can I code?

Do you have any ideas?

Thanks

1) How can I make my thumb not overlap the ends of the track?
I haven’t even attempted this yet, too busy with other bugs, but it seems like it’s something that should be fairly desirable.

2) I would like the measuredHeight of my slider to be only the track height. I can’t seem to access the track though in anyway..I’ve been trying very hard..

package player.gui.slider {
	import mx.controls.sliderClasses.SliderThumb;

	public class MySliderThumb extends SliderThumb {
		public function MySliderThumb() {
			super();
		}

		override protected function measure():void {
			super.measure();
			measuredHeight = minHeight;
			measuredWidth = minWidth;
		}
	}
}

Not sure if that’s potentially problematic, or if there is any easier way to do that..

Anyone know how I can make my thumb not overlap over the ends of the track (and still report the correct value)?

I think i have found why flex builder 2 cannot display the custom skin correctly.

It seems that we should define the following attributes in flex builder 2

thumbUpSkin:Embed(source="assets/bug.png");
thumbOverSkin:Embed(source="assets/bug.png");
thumbDownSkin:Embed(source="assets/bug.png");