Slider - 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.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<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" />

    <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.
        <span class="sliderValue"></span>
        <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider1" runat="server" MinimumValue="10" MaximumValue="20"
            Value="12" OnClientValueChanged="demo.sliderValueChange1" OnClientLoad="demo.sliderValueChange1">
        <hr />
        <div class="info">
            <strong>MinimumValue</strong> set to -10, <strong>MaximumValue</strong> set to 10, <strong>Value</strong> set to 0.
        <span class="sliderValue"></span>
        <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider2" runat="server" MinimumValue="-10" MaximumValue="10"
            Value="0" OnClientValueChanged="demo.sliderValueChange2" OnClientLoad="demo.sliderValueChange2">

Find Assistance

Help Us Improve

Was this example helpful?