| 7 | | <tt>TSlider</tt> displays a slider on a page |
| | 7 | <tt>TSlider</tt> displays a slider for numeric input purpose. A slider consists of a <em>track</em> |
| | 8 | which define the range of possible value, and a <em>handle</em> which can slide on the track, to select |
| | 9 | a value in the range. The track can be either Horizontal or Vertical, depending of the <tt>Direction</tt> |
| | 10 | property. By default, it's horizontal. |
| | 11 | </p> |
| | 12 | <p> |
| | 13 | The range boundaries are defined by <tt> MinValue</tt> and <tt>MaxValue</tt> properties. |
| | 14 | The default range is from 0 to 100. |
| | 15 | The <tt>StepSize</tt> property can be used to define the <em>step</em> between 2 values inside the range. |
| | 16 | Notice that this step will be recomputed if there is more than 200 values between the range boundaries. |
| | 17 | You can also provide the allowed values by setting the <tt>Values</tt> array. |
| 10 | | <p>To be continued...</p> |
| | 20 | <p> |
| | 21 | The handle sub-properties can be accessed by <tt>Handle</tt> property. You can also provide your own control |
| | 22 | for the handle, using <tt>HandleClass</tt> property. Note that this class must be a subclass of |
| | 23 | <tt>TSliderHandle</tt> |
| | 24 | </p> |
| | 25 | |
| | 26 | <p> |
| | 27 | The TSlider control can be easily customized using CssClasses. You can provide your own css file, using the |
| | 28 | <tt>CssUrl</tt> property. |
| | 29 | The css class for TSlider can be set by the <tt>CssClass</tt> property. Defaults values are <b>'hslider'</b> for |
| | 30 | an Horizontal slider, or <b>'vslider'</b> for a Vertical one. |
| | 31 | The css class for the Handle can be set by the <tt>Handle.CssClass</tt> subproperty. Defaults is <b>'handle'</b>, which just |
| | 32 | draw a red block as a cursor. <b>'handle-image'</b> css class is also provided for your convenience, which display an image |
| | 33 | as the handle. |
| | 34 | </p> |
| | 35 | |
| | 36 | <p> |
| | 37 | If <tt>AutoPostBack</tt> property is true, postback is performed as soon as the value changed. |
| | 38 | </p> |
| | 39 | |
| | 40 | <p> |
| | 41 | TSlider raises the <tt>onValueChanged</tt> event when the value of the slider has changed during postback. |
| | 42 | </p> |
| | 43 | |
| | 44 | <p> |
| | 45 | You can also attach ClientSide javascript events handler to the slider : |
| | 46 | <ul> |
| | 47 | <li><tt>ClientSide.onSlide</tt> is called when the handle is slided on the track. You can get the current value in the <b>value</b> |
| | 48 | javascript variable. You can use this event to update on client side a label with the current value</li> |
| | 49 | <li><tt>ClientSide.onChange</tt> is called when the slider value has changed (at the end of a move).</li> |
| | 50 | </ul> |
| | 51 | </p> |
| | 52 | |
