Slider - Slider Steps

Step settings
SmallChange:
LargeChange:
Value:
Step settings
SmallChange:
LargeChange:
Value:
Step settings
SmallChange:
LargeChange:
Value:
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Using the SmallChange property, you can create a "discrete" slider which will change its value in the defined steps. For example if you have a slider with range from 0-100 and SmallChange set to 5, the values which the slider can display are 0, 5, 10, 15, ... 95, 100. By default the value of this property is set to 1.

Using the LargeChange property you can define what should be the change in the value of the slider when the user clicks on the track. By default the LargeChange is set to 0. In this default mode the slider will automatically scroll to the value which has been clicked by the user.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <div style="padding-top: 30px;">
            <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider1" runat="server" LargeChange="10" SmallChange="5"
                Value="0" MinimumValue="-50" MaximumValue="50" Width="400" Height="60" ItemType="Tick"
                TrackPosition="TopLeft" OnClientValueChanged="OnClientValueChanged">
            </telerik:RadSlider>
            <fieldset title="Settings">
                <legend>Step settings</legend>
                <table>
                    <tr>
                        <td>
                            <strong>SmallChange:</strong>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" value="5" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>LargeChange:</strong>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" value="10" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Value:</strong>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" id="RadSlider1Value" value="0" />
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div style="padding-top: 50px;">
            <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider2" runat="server" LargeChange="10" SmallChange="10"
                Value="0" MinimumValue="-50" MaximumValue="50" Width="400" Height="60" ItemType="Tick"
                TrackPosition="TopLeft" OnClientValueChanged="OnClientValueChanged">
            </telerik:RadSlider>
            <fieldset title="Settings">
                <legend>Step settings</legend>
                <table>
                    <tr>
                        <td>
                            <strong>SmallChange:</strong>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" value="10" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>LargeChange:</strong>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" value="10" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Value:</strong>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" id="RadSlider2Value" value="0" />
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div style="padding-top: 50px;">
            <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider3" runat="server" LargeChange="0" SmallChange="5"
                Value="0" MinimumValue="-50" MaximumValue="50" Width="400" Height="60" ItemType="Tick"
                TrackPosition="TopLeft" OnClientValueChanged="OnClientValueChanged">
            </telerik:RadSlider>
            <fieldset title="Settings">
                <legend>Step settings</legend>
                <table>
                    <tr>
                        <td>
                            <strong>SmallChange:</strong>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" value="5" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>LargeChange:</strong>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" value="0" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Value:</strong>
                        </td>
                        <td>
                            <input type="text" readonly="readonly" id="RadSlider3Value" value="0" />
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?