This example shows the client-side events supported by Telerik Slider for ASP.NET MVC and Telerik RangeSlider for ASP.NET MVC.

The Slider and RangeSlider have the following events:

• The OnLoad event is raised when the components are initialized. You can subscribe to that event by using one of the two overloads of the OnLoad method. The one accepts Action as an argument - the other accepts a String. Use the Action overload to define the event handler inline. Use the String overload to specify the name of the JavaScript function which handles the event. The following code shows both options:

  <%= Html.Telerik().Slider()
          .Name("Slider")
          .ClientEvents(events => events
              .OnLoad("onLoad")
          )
  

  or

  <% Html.Telerik().Slider()
         .Name("Slider")
         .ClientEvents(events => events
         .OnLoad(() => 
         {
          %>
           function(e) {
               //perform required actions here.
           }
          <%
         })
         .Render();
  

• The OnChange event is raised when the currently value is changed. You can subscribe to that event by using one of the two overloads of the OnChange method:

  <%= Html.Telerik().Slider()
          .Name("Slider")
          .ClientEvents(events => events
              .OnChange("onChange")
          )
  

  or

  <% Html.Telerik().Slider()
         .Name("Slider")
         .ClientEvents(events => events
         .OnChange(() => 
         {
             %>
              function(e) {
                  //perform required actions here.
              }
             <%
         })
         .Render();
  

• The OnSlide event is raised when drag handle is moved. You can subscribe to that event by using one of the two overloads of the OnSlide method:

  <%= Html.Telerik().Slider()
          .Name("Slider")
          .ClientEvents(events => events
              .OnSlide("onSlide")
          )
  

  or

  <% Html.Telerik().Slider()
         .Name("Slider")
         .ClientEvents(events => events
         .OnSlide(() => 
         {
             %>
              function(e) {
                  //perform required actions here.
              }
             <%
         })
         .Render();