Changing a slider control’s thumb skin

Great article. Do you know of any way to apply different skins for sliders with multiple thumbs?

Reply

Hi Peter,

Brilliant. Thanks for the tip.

Only one issue I had was with setting “thumbSkin”. Looks like the version of flex I’m using doesn’t support that. I have to explicitly set the thumbUpSkin, thumbDownSkin, etc. I’m using flex Builder Version: 2.0.155577.

Regards,
Mike

Reply

I’m trying to annotate video cue points using multiple thumbs on a slider. Works well but I’ve not figured out how to dynamically generate a new thumb and add it to the slider. Is there a simpler way or a better approach to doing something like this?

Thanks,
Mike

Reply

Hi Peter,

Works like a champ. You have been a great help. I was stuck on adding the new thumb, thinking I needed to instantiate a new sliderThumb object and add it to the slider. Looks like this get done for you simply by updating the thumbCount.

Thanks a million,
Mike

Reply

I needed to change the thumbSkin with each thumb potentially different sizes.
To prevent it from scaling I made this class:

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

Reply

Hi,
This is a big help. I tried it and have one serious problem. I’m emulating a scrollbar, but want the control of hslider. So the thumb is a rather large shape, 240 pixels. I’m using a skin for the track as well, and for some reason it’s leaving big gaps in the track when I use the thumbclass setting such a big width.

Do you have any ideas?

Thanks

Reply

john,

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.

Reply

Hi 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

Reply

Hi Peter,

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

Reply

Hi, gr8 discussion.

I am having problem in highlighting a track.
when we set showTrackHighlight="true" then only the track portion on left of thumb is painted.
how can I highlight right portion of a track i.e. rest of the track.

I want to paint track portion in two colors.

Do any one have any ideas?

Thanks.

Reply

Why can’t you specify the thumbSkin image source in the constructor of the BigThumbClass? Wouldn’t that make more sense?

Reply

When using multiple thumbs, only the first two thumbs are highlighted(color filled with first two thumbs). Is it possible to fill color for other pair of thumbs.

your help is highly important.

thanks
Guru

Reply

Hi Peter

Thanks for the great tutorials… I have been looking all over for this but cannot find it – is there a way to set the slider thickness? I know we can set it for the tick but for the slider itself??

Thanks

- Sami

Reply

Hi Peter

Thanks for that – I tried setting a jpg skin for the “trackSkin” property and it worked… though it’s a bit tricky

BR
- Sami

Reply

Hi,

I have created hslider with some reference site. I need to fire the event of thumbSkin change movement to function sliderChange. I have got value doesn’t macth for requirement. And also didn’t get the proper Currrent Slider value for checking for my requirement. Please any body help with this point.

       private function sliderChange(event:SliderEvent):void {
              Alert.show("Slider Value"+(Slider(event.currentTarget)));           
              var currentSlider:Slider=Slider(event.currentTarget);
              txt.text="{Math.round(currentSlider.value)}";
              var val:Number = Math.round(currentSlider.value);
 
               if(val < 50)
                {
                 theme.visible = true; 
                 themes.visible = false;
                }
                else
                {
                  themes.visible = true;
                    theme.visible = false; 
                }
      }

Regards
yuva

Reply

Hi all,

is it possible to create a non-stretchy thumbIcon on a slider or scrollbar? I’m trying to create a custom scrollbar. I’m only using a simple trackSkin with a small, circular (15px by 15px) thumbIcon. I’ve tried a lot of things to get this working, but nothing seems to be working. At this moment I’ve a .png with transparency to the background, and de scaleGridTop and bottom set to the last pixel of the image. This keeps the thumbIcon intact, but it creates a big kind of ‘margin’ (in fact its a largely stretched 1px transparent part of the png). Is there some sort of option that says ‘unscaledThumbIcon = true’ or anything like it… (Sorry, I’m a noob)

Greetz and thanx in advance!

Reply

Hi Peter and the FE community. First I want to thank you for this wonderfull site. You’re helping a lot of people man. I hope we could give back someday.

Here’s my question.
When I set two differents skins for a thumb (for instance one for the upSkin and one for the overSkin), it seems that only the upSkin has the custom size. When I point the thumb with the mouse it goes back to the default size. Do you think we need to override another method to get this problem solved ?

My code is the same than yours except in the css where I have a skin for each thumb state.

Reply