Comments on: Changing a slider control’s thumb skin

By: michael

michael — Wed, 16 Nov 2011 17:33:14 +0000

got it :
track-skin: Embed(source=”../images/”);

By: michael

michael — Wed, 16 Nov 2011 17:16:35 +0000

simple in flex 4 :

mx|Slider{

accent-color:#cccccc;
show-track-highlight:true;
tick-color:#6f7777;
data-tip-offset:50;
thumb-skin:Embed(source=”../images/flex_arrow.png”);

}
but how to change the background skin(image) for the background strip (horizontal line behind the thumb)

By: michael

michael — Wed, 16 Nov 2011 17:14:08 +0000

how to change the background skin(image) for the background strip (horizontal line behind the thumb)

By: John Kakoulides

John Kakoulides — Thu, 07 Apr 2011 16:32:07 +0000

Works in Flex 3.5. Thanks!

By: Fall landscapes

Fall landscapes — Wed, 06 Oct 2010 09:10:22 +0000

Great article, thank you very much! By the way, you may do the same by overriding measure() method like this:

package components.parts
{
import mx.controls.sliderClasses.SliderThumb;
import mx.core.mx_internal;

use namespace mx_internal;

public class BigSliderThumb extends SliderThumb {

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

By: Beach pictures

Beach pictures — Wed, 06 Oct 2010 09:02:33 +0000

Thank you for another great article!

One side note — it would be more logical to put “sliderThumbClass” property into the CSS as well.

By: tsveti

tsveti — Mon, 16 Aug 2010 21:37:53 +0000

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:player=”org.bytearray.gif.player.*”>
<mx:HSlider id=”slidersheep”
change=”MoveSheep()”
snapInterval=”0.5″
tickInterval=”10″
liveDragging=”true”
showTrackHighlight=”true”
sliderThumbClass=”BigThumbClass” width=”732″ height=”117″
thumbSkin=”@Embed(source=’first.png’)” y=”10″ />

<mx:Image id=”sec” source=”second.png” x=”10″ y=”189″/>

By: tsveti

tsveti — Mon, 16 Aug 2010 21:32:35 +0000

Hi all,
I am really new to flex and I am trying to make a slider with animated thumb(i.e. I want to reload the thumb in few milliseconds so that it would look like animation). I used the example above to put a picture on the thumb but when I try to change it with setStyle method it’s not changing…If anyone can help…here’s my code:

….

….
public function MoveSheep():void
{
import mx.controls.sliderClasses.SliderThumb;
slidersheep.setStyle(“thumbSkin”, “{sec.source}”);
//Alert.show(“sheep”, slidersheep.getStyle(“thumbSkin.source”));
}

Alert is indicating the new source but visually, there is no change.
And one more question…if I try to declare picture “sec” in AS I constantly get the error “1114 public attribute can used in this package”.
I know that these are very stupid questions but I can’t fix them :)
tsveti

By: np

np — Sat, 29 May 2010 07:38:36 +0000

That works great! Thank you very much :)

By: Peter deHaan

Peter deHaan — Fri, 28 May 2010 14:03:36 +0000

@np,

This works for me in Flex 3.5 SDK. I had to use the updateComplete because when I tried setting the y property in the creationComplete event handler, the thumb offset would snap back to it’s original value after dragging the thumb:

"1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    
        
            protected function setThumbY(evt:Event):void {
                sl.getThumbAt(1).y = 10;
            }
        ]]>
    
 
     id="sl"
            thumbCount="2"
            values="[3,7]"
            showTrackHighlight="true"
            updateComplete="setThumbY(event);"/>
 
>

Peter