Customing the Flex HSlider and VSlider controls

Can we change the track height for the HSlider?

Reply

Thanks Peter,

just another question…
a hslider track bar has a small offset of around 3 pixels from the left and the right side, can this be reduced?

Reply

Is there a way to change the order of the min max positions on the slider so that the max value is on the left and the min value on the right?

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

I know there is a way to set the toolTip for the slider, but do you know of a way to override the dataTip to display something else?

I’m using the DisplayShelf component to display images, and as the slider moves, I want to update the dataTip with the name or caption of the image.

Any ideas?

Reply

Peter,

The first link had exactly what I needed – thank you!!!

-Erich-

Reply

Last question is similar to a problem I’m having – can I display the VSlider track on the left of the labels? Why is there no labelPlacement property for the sliders? I think it’s a rather simple and important feature. Any way around it?

Reply

@Greg:

You can set the labeloffset to accomplish this:

<mx:VSlider labels="['start', 'finish']" labelOffset="10" />

Maybe not pretty, but it works…

Reply

Ian,

You can listen for the change event to detect when the selected value has changed and then get the current thumb value.

Peter

Reply

Ian/Jan,

If you only want to get the current value of the HSlider/VSlider, you can just use the “value” property to get the current slider control’s value:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Label id="lbl1" />
    <mx:HSlider id="sldr1"
            minimum="0"
            maximum="11"
            snapInterval="1"
            liveDragging="true"
            change="lbl1.text = sldr1.value.toString();" />
</mx:Application>

Or, you can use data binding:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Label id="lbl1"
            text="{sldr1.value}" />
    <mx:HSlider id="sldr1"
            minimum="0"
            maximum="11"
            snapInterval="1"
            liveDragging="true" />
</mx:Application>

Or, if you want to do it all using ActionScript:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.HSlider;
            import mx.controls.Label;
            import mx.events.SliderEvent;

            private var lbl1:Label;
            private var sldr1:HSlider;

            private function init():void {
                lbl1 = new Label();
                addChild(lbl1);

                sldr1 = new HSlider();
                sldr1.minimum = 0;
                sldr1.maximum = 11;
                sldr1.snapInterval = 1;
                sldr1.liveDragging = true;
                sldr1.addEventListener(SliderEvent.CHANGE, sldr1_change);
                addChild(sldr1);
            }

            private function sldr1_change(evt:SliderEvent):void {
                lbl1.text = sldr1.value.toString();
            }
        ]]>
    </mx:Script>

</mx:Application>

Peter

Reply

If you set ‘dataTipPlacement’ to ‘left’ or ‘right’ in this example, a small horizontal line is visible under the tooltip. Is this a (known) bug? I actually have the same feature in one of my applications, but then when ‘dataTipPlacement’ is set to ‘top’ as well.

Does anybody know how to get rid of this line?

Thanks,

Eugene

Reply