SliderField

Overview

Field used to select a numerical value.

Combines a text input (restricted to numbers only) with a vertical slider. The vertical slider thumb is centered beneath the mouse for efficient adjustments.

Creating the SliderField Component

The SliderField is a Spark SkinnableComponent and can be added to any container that implements IVisualElementContainer.

Using the SliderField Component

Use the "snapInterval" property to change the intervals the user is allowed to set the "value". For example, to allow the selection of: 0, 45, 90, 135, 180, 225, 270, 315, or 360 as possible values, the "snapInterval" should be 45.

Set the maximum and minimum allowable value via the "maximum" and "minimum" properties.

A value of NaN means that the user entered a blank value, just like for the NumericStepper control.

Accessibility & Focus

Field can be tabbed to and value committed via the ENTER key.

If the slider is open, the value can be committed and the slider popup closed via the ENTER key.

The text input field can receive focus. The popup VSlider takes focus from the textfield.

Selected Custom Events

CLOSE
ardisia.components.sliderField.events.SliderFieldEvent
Dispatched when the slider is closed (hidden).

OPEN
ardisia.components.sliderField.events.SliderFieldEvent
Dispatched when the slider is opened (displayed).

CHANGE
ardisia.components.sliderField.events.SliderFieldEvent
Dispatched when the "value" property changes due to user interaction.

VALUE_COMMIT
ardisia.components.sliderField.events.SliderFieldEvent
Dispatched when the "value" property changes.

Themes & Skinning

Included are skins for the Spark, Stockholm, and London themes.

Example

Simple Example:

<sliderField:SliderField snapInterval="10" 
			 maximum="100"
			 minimum="100" />

See the SliderField demo application for example code.

Back To Top