TSlider

TSlider displays a slider for numeric input purpose. A slider consists of a track which define the range of possible value, and a handle which can slide on the track, to select a value in the range. The track can be either Horizontal or Vertical, depending of the Direction property. By default, it's horizontal.

The range boundaries are defined by MinValue and MaxValue properties. The default range is from 0 to 100. The StepSize property can be used to define the step between 2 values inside the range. Notice that this step will be recomputed if there is more than 200 values between the range boundaries. You can also provide the allowed values by setting the Values array.

The handle sub-properties can be accessed by Handle property. You can also provide your own control for the handle, using HandleClass property. Note that this class must be a subclass of TSliderHandle

The TSlider control can be easily customized using CssClasses. You can provide your own css file, using the CssUrl property. The css class for TSlider can be set by the CssClass property. Defaults values are 'hslider' for an Horizontal slider, or 'vslider' for a Vertical one. The css class for the Handle can be set by the Handle.CssClass subproperty. Defaults is 'handle', which just draw a red block as a cursor. 'handle-image' css class is also provided for your convenience, which display an image as the handle.

If AutoPostBack property is true, postback is performed as soon as the value changed.

TSlider raises the onValueChanged event when the value of the slider has changed during postback.

You can also attach ClientSide javascript events handler to the slider :

• ClientSide.onSlide is called when the handle is slided on the track. You can get the current value in the value javascript variable. You can use this event to update on client side a label with the current value
• ClientSide.onChange is called when the slider value has changed (at the end of a move).