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

Setting Value and Range

MinimumValue set to 10, MaximumValue set to 20, Value set to 12.
MinimumValue set to -10, MaximumValue set to 10, Value set to 0.

Using the Value property you can set the initial value of the slider. When the value exceeds the bounds of the slider - e.g. it is bigger than the MaximumValue or smaller than the MinimumValue the slider will be reset to its bound value - Minimum or Maximum respectively.

By default the initial Value of the slider is set to its MinimumValue.

  • 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>
    <script type="text/javascript" src="scripts.js"></script>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</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 size-narrow">
        <div class="info">
            <strong>MinimumValue</strong> set to 10, <strong>MaximumValue</strong> set to 20, <strong>Value</strong> set to 12.
        </div>
        <span class="sliderValue"></span>
        <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider1" runat="server" MinimumValue="10" MaximumValue="20"
            Value="12" OnClientValueChanged="demo.sliderValueChange1" OnClientLoad="demo.sliderValueChange1">
        </telerik:RadSlider>
        <hr />
        <div class="info">
            <strong>MinimumValue</strong> set to -10, <strong>MaximumValue</strong> set to 10, <strong>Value</strong> set to 0.
        </div>
        <span class="sliderValue"></span>
        <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider2" runat="server" MinimumValue="-10" MaximumValue="10"
            Value="0" OnClientValueChanged="demo.sliderValueChange2" OnClientLoad="demo.sliderValueChange2">
        </telerik:RadSlider>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance