Archive for the 'VSlider' Category

04
Jun

Using an embedded font with the Slider controls in Flex

The following example shows how you can use an embedded font with the Flex HSlider control by setting the fontFamily and labelStyleName styles.

Full code after the jump.

Continue reading ‘Using an embedded font with the Slider controls in Flex’

04
Jun

Setting the tick length on a Slider control in Flex

In a previous example, “Setting the tick thickness on a Slider control in Flex”, we saw how to change the thickness of a tick on a Flex HSlider control by setting the tickThickness style.

The following example shows how you can set the length of a tick on a Flex HSlider control by setting the tickLength style.

Full code after the jump.

Continue reading ‘Setting the tick length on a Slider control in Flex’

09
May

Setting the data tip offset in a Slider control in Flex

The following example shows how you can control the data tip offset in a Flex HSlider control by setting the dataTipOffset style.

Full code after the jump.

Continue reading ‘Setting the data tip offset in a Slider control in Flex’

12
Sep

Changing a slider control’s thumb skin

The following example shows how you can customize a slider control (HSlider or VSlider) and use your own custom embedded image instead of the default triangle thumb skin.

Full code after the jump.

Continue reading ‘Changing a slider control’s thumb skin’

12
Sep

Customizing the slide duration and slide easing function on a Flex slider control

The following example shows how you can customize the duration and easing function used when a user clicks on a thumb track on an HSlider or VSlider control in Flex.

Full code after the jump.

Continue reading ‘Customizing the slide duration and slide easing function on a Flex slider control’

12
Sep

Styling the HSlider control using CSS

The following example shows how you can style a HSlider (or VSlider) control in Flex using Cascading Style Sheets (CSS).

Full code after the jump.

Continue reading ‘Styling the HSlider control using CSS’

11
Sep

Customing the Flex HSlider and VSlider controls

The following example shows how you can customize several properties and styles in the Flex HSlider control.

Full code after the jump.

Continue reading ‘Customing the Flex HSlider and VSlider controls’

22
Aug

Using overlapping slider thumbs in the Flex Slider controls

I was playing around with the HSlider component tonight and was checking out the allowThumbOverlap property. The following example creates a horizontal slider with 2 slider thumbs and lets you toggle the allowThumbOverlap property with the showTrackHighlight property set to true.

Full code after the jump.

Continue reading ‘Using overlapping slider thumbs in the Flex Slider controls’

23
Jul

Formatting multiple data tips in a Slider

Some imaginary blog reader asks, “How do i change a Slider’s dataTip based on which Slider thumb is being dragged?”
I crafted up this sneaky code to listen for the thumbPress and thumbRelease events to log which slider is being… slid?

Full code after the jump.

Continue reading ‘Formatting multiple data tips in a Slider’

18
Jul

Formatting data tips in a Slider

I was playing around with the HSlider the other day and needed to format the data tool tip. Thankfully, the Flex SDK makes it very very easy, all you need to do to override the default data tip using the dataTipFormatFunction property. By simply passing in the name of a user-defined function, you can format the data tip text however you want (such as prefixing dollar signs or what have you).

Full code after the jump.

Continue reading ‘Formatting data tips in a Slider’