uiVSlider

uiVSlider

The uiVSlider component allows users to select a value within a pre-defined range by sliding a thumb along a track. The current selected value is determined by the thumb's position on the track.

The orientation of a uiVSlider is always vertical. You cannot change this orientation. If you need a horizontal slider, use uiSlider instead.

Using uiVSlider

ActionScript 3.0 Example

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.controls.uiText;
import com.ghostwire.ui.controls.uiVSlider;
import com.ghostwire.ui.data.uiRange;
import com.ghostwire.ui.enums.ALIGN;
 
import flash.events.Event;
 
// ** text label **
var txt:uiText = new uiText("Percent:");
txt.alignY = ALIGN.CENTER;
 
// ** stepperinput using range **
var score:uiVSlider    = new uiVSlider(new uiRange(75,0,100)); // ** value 50, min 0, max 100 **
score.range.addEventListener(Event.CHANGE,on_rangeChange);
score.range.snap = true; // ** round value to nearest range.step interval **
 
var suffix:uiText = new uiText(score.range.value + "%");
suffix.alignY = ALIGN.CENTER;
 
var box:uiBox = new uiBox();
box.addChild(txt);
box.addChild(score);
box.addChild(suffix);
 
addChild(box);
 
function on_rangeChange(evt:Event):void
{
    suffix.text = (uiRange(evt.target).value) + "%";
}

Range

The values represented by a uiVSlider is defined by a com.ghostwire.ui.data.uiRange object, which must be declared in the constructor of the uiVSlider. This uiRange object contains the values for the current value, minimum and maximum values, as well as the step and page sizes.

var sizeInput:uiVSlider = new uiVSlider(new uiRange(10,0,100)); // ** current value 10, minimum 0, maximum 100 **

To be notified of changes to the current value, listen for the Event.CHANGE event that will be dispatched by the uiRange object when the value is adjusted:

sizeInput.range.addEventListener(Event.CHANGE,on_rangeChange);
function on_rangeChange(evt:Event):void
{
    trace(uiRange(evt.target).value);
}

To adjust the minimum and maximum values, use the resize(minimum, maximum) method of the uiRange object:

sizeInput.range.resize(20,50); // ** adjust minimum to 20, maximum to 50 **

To be notified of changes to the minimum and/or maximum values, listen for the Event.RESIZE event that will be dispatched by the uiRange object when the range has been adjusted (resized using the resize() method):

sizeInput.range.addEventListener(Event.RESIZE,on_rangeResize);
function on_rangeResize(evt:Event):void
{
    trace(uiRange(evt.target).minimum);
    trace(uiRange(evt.target).maximum);
}

The step value determines one unit of each increment/decrement.

The page value determines the amount to increment/decrement when the Page Up and Page Down key is hit, respectively. This value must be higher than the step value, otherwise pressing the Page Up/Page Down keys has no effect.

Size

The default desired size of a uiVSlider instance depends on the skin used - the actual size of the skin is used as the default desired size.

The setSize(width,height) method can be used to set preferred dimensions:

var sldr:uiVSlider = new uiVSlider(new uiRange(50,0,100));
sldr.setSize(100,22);

User Interaction

While a uiVSlider instance has focus, the user can use the following keys to interact with the control:

Key	Action
Left/Down Arrow	Value decrements by `range.step`.
Right/Up Arrow	Value increments by `range.step`.
End	Value is set to `range.maximum` value.
Home	Value is set to `range.minimum` value.
Shift+Tab	Moves focus to previous UI control in the tab focus chain.
Tab	Moves focus to next UI control in the tab focus chain.

API Reference

For more information on the members of the com.ghostwire.ui.controls.uiVSlider class, please refer to the API Reference.