How To Use The HSlider And VSlider Components - Feathers UI

How to use the HSlider and VSlider components

The HSlider and VSlider classes allow a user to select a numeric value in a specific range by dragging a thumb along the length of a track.

The Basics

For simplicity, the example code on this page will always use HSlider, but the same APIs are available on VSlider too.

First, let's create an HSlider control, set up its range of values, and add it to the the display list.

var slider = new HSlider(); slider.minimum = 0.0; slider.maximum = 100.0; slider.value = 50.0; addChild(slider);

The value property indicates the current value of the slider, while the minimum and maximum properties establish a range of possible values.

slider.snapInterval = 1.0;

The snapInterval property controls how the slider's value is rounded as it is dragged. When the slider's snapInterval is set to 1.0, the slider will be dragged along whole numbers only and it cannot have a value like 4.5.

Add an event listener for Event.CHANGE to perform an action when the value property changes.

slider.addEventListener(Event.CHANGE, slider_changeHandler);

Check for the new value in the listener.

function slider_changeHandler(event:Event):Void { var slider = cast(event.currentTarget, HSlider); trace("slider.value change: " + slider.value); }

Styles

The skins for the HSlider and VSlider components are divided into two main parts: the thumb and the track. The track may either fill the full length of the slider, or it may be optionally divided in half — meeting at the center of the slider's thumb.

Thumb

Style a slider's thumb using the thumbSkin property. The following example sets it to a RectangleSkin instance.

var thumbSkin = new RectangleSkin(); thumbSkin.border = SolidColor(1.0, 0x999999); thumbSkin.fill = SolidColor(0xcccccc); thumbSkin.width = 32.0; thumbSkin.height = 32.0; slider.thumbSkin = thumbSkin;

The border and fill properties of the RectangleSkin are used to adjust its appearance. They support a variety of values — from solid colors to gradients to bitmaps.

The slider automatically calculates its preferred size based on the initial dimensions of its skins, so it's important to set a skin's width and height properties to appropriate values to use in this calculation.

See Skinning with common shapes for more details about how to use RectangleSkin with the LineStyle and FillStyle enums that change its border and fill appearance.

Track

Style a slider's track using the trackSkin property. The following example sets it to a RectangleSkin instance.

var trackSkin = new RectangleSkin(); trackSkin.border = SolidColor(1.0, 0x999999); trackSkin.fill = SolidColor(0xcccccc); trackSkin.width = 120.0; trackSkin.height = 32.0; slider.trackSkin = trackSkin;

By default, the trackSkin will fill the entire length of the slider. In other words, it will fill the width of an HSlider, or it will fill the entire height of a VSlider.

To give the track different a appearance on each side of the thumb, set the optional secondaryTrackSkin.

var trackSkin = new RectangleSkin(); trackSkin.border = SolidColor(1.0, 0x999999); trackSkin.fill = SolidColor(0xccccff); trackSkin.width = 60.0; trackSkin.height = 32.0; slider.trackSkin = trackSkin; var secondaryTrackSkin = new RectangleSkin(); secondaryTrackSkin.border = SolidColor(1.0, 0x999999); secondaryTrackSkin.fill = SolidColor(0xcccccc); secondaryTrackSkin.width = 60.0; secondaryTrackSkin.height = 32.0; slider.secondaryTrackSkin = secondaryTrackSkin;

On an HSlider, the trackSkin appears on the left side of the thumb, and the secondaryTrackSkin appears on the right side. On a VSlider, the trackSkin appears below the thumb, and the secondaryTrackSkin appears above the thumb.

Related Links

• feathers.controls.HSlider API Documentation
• feathers.controls.VSlider API Documentation