summaryrefslogtreecommitdiff
path: root/demos/quickstart/protected/pages/Controls/Slider.page
blob: 60422d0d4dd0421c2b91b66be2cda67c0abb4092 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<com:TContent ID="body" >

<h1 id="4401">TSlider</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TSlider" />

<p id="510314" class="block-content">
<tt>TSlider</tt> displays a slider for numeric input purpose. A slider consists of a <em>track</em> 
which define the range of possible value, and a <em>handle</em> which can slide on the track, to select 
a value in the range. The track can be either Horizontal or Vertical, depending of the <tt>Direction</tt>
property. By default, it's horizontal.
</p>
<p id="570015" class="block-content">
The range boundaries are defined by <tt> MinValue</tt> and <tt>MaxValue</tt> properties. 
The default range is from 0 to 100. 
The <tt>StepSize</tt> property can be used to define the <em>step</em> 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 <tt>Values</tt> array.
</p>

<p id="570016" class="block-content">
The handle sub-properties can be accessed by <tt>Handle</tt> property. You can also provide your own control
for the handle, using <tt>HandleClass</tt> property. Note that this class must be a subclass of 
<tt>TSliderHandle</tt>
</p>

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

<p id="570018" class="block-content">
If <tt>AutoPostBack</tt> property is true, postback is performed as soon as the value changed.
</p>

<p id="570019" class="block-content">
TSlider raises the <tt>onValueChanged</tt> event when the value of the slider has changed during postback.
</p>

<p id="570020" class="block-content">
You can also attach ClientSide javascript events handler to the slider :
<ul>
<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>
javascript variable. You can use this event to update on client side a label with the current value</li>
<li><tt>ClientSide.onChange</tt> is called when the slider value has changed (at the end of a move).</li>
</ul> 
</p>

<com:RunBar PagePath="Controls.Samples.TSlider.Home" />

</com:TContent>