CODEWITHSUNDEEP
apache-flex
wtm
wtm

Reputation: 1419

How to customise a HSlider in flex?

I'm new to flex,and I want to change the image of HSlider,like this

enter image description here

What should I do?please give me a simple example.

Upvotes: 8

Views: 3712

Answers (2)

Art
Art

Reputation: 831

@RIAstar had a great answer. But there is a little problem - this orange part before thumb. AFAIK the easiest way to create skin like this is to add rect or more complicated figure in HSlider skin, that will change it's width according to thumb's x coordinate, i.e.

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100" 
          tabEnabled="false"
          skinClass="spark.skins.spark.HSliderTrackSkin" />

<s:Rect width="{thumb.x + thumb.width/2}" height="{track.height}">
    <s:fill>
        <s:SolidColor color="0x00FF00" />
    </s:fill>
</s:Rect>

<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
          tabEnabled="false"
          skinClass="spark.skins.spark.HSliderThumbSkin" />

Upvotes: 12

RIAstar
RIAstar

Reputation: 11912

You'll have to create a custom skin. Now, HSlider is a little bit special in that it has some subcomponents that are also skinnable. You'll actually have to create three custom skins:

  • one for the HSlider itself (this skin includes the tooltip)
  • one for the track (the yellow/brown zone in your picture)
  • and one for the thumb

The track and the thumb are both in fact Buttons so those skins will have to be Button skins.

Explaining the entire process will make this answer too lengthy and specific, so I'll just get you started. You should be able to figure it out from there. I'll also assume you're using FlashBuilder as an IDE.

Create main skin

Set the skinClass style on an HSlider and hit Alt+Space. This will bring up code completion, but you can also select "Create Skin...".

enter image description here

Select that and a wizard will appear. Fill out something like the following. Note that we're making a copy of the default Spark HSlider skin. We remove the styling code because it will not be necessary in such a customized skin.

enter image description here

Create track and thumb skins

Open this new skin class and scroll down to the bottom. You'll see two Buttons; one with id track and one with id thumb. Their skinClass style is set to the default spark skins for these buttons. Delete the content and repeat the operation of the previous step (creating a new skin), only this time create a copy of HSliderTrackSkin and HSliderThumbSkin

Edit the skins

You now have an exact copy of the default Spark skins for HSlider (except you removed the styling). Now you can start editing: changing colors, changing shapes, etc. If you need more information about Flex graphics, I suggest you Google up on FXG. But you can just try to fiddle with the default skins and see where you can get too.

Upvotes: 9

Related Questions