RangeSlider

Introduction

A classical use case for the graphical Slider control is offering the user an interactive scenario - coupled with a graphical chart such as a pie - to check various size settings in a comfortable way.

You use the Range Slider control to let the user slide on a bar to make a setting on a certain range of values where the value set is predefined. The slider can contain steps, or not; if steps are available, the Slider control can have ticks (totalUnits property). For the single units, labels can be displayed using stepLabels. The values are numerically; generally at least the first value (minimum) and the last value (maximum) are defined to lead the user regarding slider usage.

The slider can be controlled via mouse or keyboard. As soon as the Slider is moved on client-side, the change event is fired. A reaction on this change, for example an alert with a confirmation on the change, can be implemented.

Example

Basic Slider Example



Slider With Ticks



Slider With Labels



Slider With TextField Displaying Detail Information

The fourth example is a bit more complex than the first ones. It shows how to synchronize a Slider control and a TextField control. Therefore the change events are implemented to update each other using the setValue methods. The change event is fired only once for each change. The event is fired when the mouse button is released.



Vertical Slider With Steps



Horizontal Slider With Labels



API Documentation

See API documentation