New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Slider Steps

Step settings
SmallChange:
LargeChange:
Value:
Step settings
SmallChange:
LargeChange:
Value:
Step settings
SmallChange:
LargeChange:
Value:

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 and so it does not render the large ticks with the steps values.

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

<!DOCTYPE html>
<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>

Support & Learning Resources

Find Assistance