Slider

A Slider is a control for setting a value along a defined range. Used for adjusting system settings such as contrast and brightness.

Behaviours & States

Behaviour

A Slider consists of a Bar (which has the upper and lower limits), the Current Value, and the Selector. There is an additional Buffering bar that can be added as well.

 

The value of the Slider can be changed by either the Magic Remote or 5-way navigation. Using the Magic Remote, press and hold select on the remote while moving the remote. Releasing the select button returns the Slider to the normal state. Using 5-way, first hit select then use the arrow buttons to move the Selector. To exit active state, hit select on the remote again.

 

There are several ways to customize the Slider and its behaviour. These include:

  • Lock Bar: When disabled, Lock Bar prevents the Current Value from changing despite selector movement.
  • Constrain: When enabled, Constrain will prevent Current Value and Selector from going past Buffering.
  • Tool Tip: The Tool Tip is used to display either a value or a percentage can be displayed when the Selector is moved.
  • Tapable: When Tapable is enabled, users with a remote to point at a location on the slider and hit select to change the value.
  • Animation: Animation works in conjunction with Tapable. After tapping on the slider, the Selector slides to the new location (enabled) versus jumping to the location (disabled).

States

Normal (up/unpressed) The Slider is available for use and is not selected.
Focus (hover) The Slider has the current focus from the remote and is ready to be selected.
Active (down/pressed) The Slider has been selected and is able to change.
Deactivated (disabled) The Slider cannot be selected or changed.

Sizing

Bar dictates the width of the overall control and is defaulted to 300 pixels. The width can be specified by the developer. The height is not configurable. The Current Value cannot exceed the Bar, but may be constrained due to the Lock Bar or Constrain properties. Buffering also cannot exceed the width of the Bar, but has no other constraints.

Illustration

SLIDER.png

Navigation