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

Client-side Events

Slider with single drag handle

Range Slider

Event log
The following client-side events are available:
  • OnClientLoad - raised when the slider is initialized
  • OnClientValueChanging - raised before the value of the slider changes
  • OnClientValueChanged - raised when the value of the slider changes
  • OnClientSlideStart - raised when a drag handle of the slider starts sliding
  • OnClientSlide - raised when a drag handle of the slider is sliding
  • OnClientSlideEnd - raised when a drag handle of the slider finishes sliding
  • DefaultVB.aspx
  • scripts.js
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></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-containers">
        <div class="demo-container">
            <h3>Slider with single drag handle</h3>
            <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="SingleThumbSlider"
                Width="370px" Value="60" 
                OnClientLoad="demo.singleThumbSliderLoad" 
                OnClientValueChanging="demo.singleThumbSliderValueChanging"
                OnClientValueChanged="demo.singleThumbSliderValueChanged" 
                OnClientSlideStart="demo.singleThumbSliderSlideStart"
                OnClientSlide="demo.singleThumbSliderSlide" 
                OnClientSlideEnd="demo.singleThumbSliderSlideEnd">
            </telerik:RadSlider>
        </div>
        <div class="demo-container">
            <h3>Range Slider</h3>
            <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RangeSlider"
                Width="370px" IsSelectionRangeEnabled="true" SelectionStart="20" SelectionEnd="80"
                OnClientLoad="demo.rangeSliderLoad" 
                OnClientValueChanging="demo.rangeSliderValueChanging" 
                OnClientValueChanged="demo.rangeSliderValueChanged"
                OnClientSlideStart="demo.rangeSliderSlideStart" 
                OnClientSlide="demo.rangeSliderSlide" 
                OnClientSlideEnd="demo.rangeSliderSlideEnd">
            </telerik:RadSlider>
        </div>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance