Payday Loans Online Payday Loans Online

Todd Rothe : UI/UX Developer

it's pronounced rowth-ee

By 2g1c2 girls 1 cup

Remove the Thumb From HSlider

I was glad to see the css for the HSlider handled most of my styling needs for HSlider; tickLength, showTrackHighlight, themeColor.

One styling need it does not support is the removing of the thumb element. I’m using the HSlider to control mp3 playback and inform the user of playback progress. After setting showTrackHighlight=true; the thumb seemed unnecessary.

For those in a hurry, here is what worked:

Remove the thumb skin through style sheet. In myAppStyles.css:
HSlider {
thumbSkin: ClassReference( null );
}

For the curious, here are the other things I tried and why they did not work:

1. In mp3Player.mxml set the thumbCount property to “0″:
< mx:HSlider id="msgTimeBar" thumbCount="0"/ > Ideally, setting the thumbCount=”0″ would override the default thumbCount=”1″. It does not. Slider.as is coded so 1 is lowest number of thumbs you can set
Slider.as – ln 1008: numThumbs = value < 1 ? 1 : value;

2. In mp3Player.mxml set the thumbSkin to null via Style tags:
< mx:Style>
thumbSkin: ClassReference(null);
< /mx:Style>

Received this warning in my mxml file in FlexBuilder “-CSS type selectors are not supported in components: ‘HSlider’ “. Note: This warning may not be immediately apparent because it appears at the top of the file next to the root tag. More info on this warning can be found here.

Turns out that the client preferred a vertical bar rather than no thumb at all. Ultimately I created a new class which extended sliderThumbClass and draws a small rectangle.

In mp3Player.mxml set the
< mx:HSlider id="msgTimeBar" sliderThumbClass="com.toddrothe.controls.RectThumb" />

RectThumb.as:
package com.toddrothe.controls
{
import mx.controls.sliderClasses.SliderThumb;

public class RectThumb extends SliderThumb
{
public function RectThumb()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
this.graphics.beginFill(0xFFFFFF,1);
this.graphics.drawRect(5,8,4,8);
this.graphics.endFill();
}
}
}

 

No Responses to “Remove the Thumb From HSlider” (post new)

 

Leave a Reply

You must be logged in to post a comment.