Edit this page

Slider HtmlHelper Overview

The Slider HtmlHelper extension is a server-side wrapper for the Kendo UI Slider widget.

Getting Started

The Basics

There are two types of Sliders:

  • Kendo UI Slider for ASP.NET MVC, which presents one handle and two opposing buttons for selecting a single numeric value.
  • Kendo UI RangeSlider for ASP.NET MVC, which present two handlers for defining a range of numeric values.

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI Slider.

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.

  2. Create a new action method which renders the view.

    Example
        public ActionResult Index()
        {
            return View();
        }
    
  3. Add a Slider.

    Example
    
            <%: Html.Kendo().Slider()
                    .Name("slider") //The name of the Slider is mandatory. It specifies the "id" attribute of the widget.
                    .Min(0) //Set min value of the Slider.
                    .Max(100) //Set min value of the Slider.
                    .Value(20) //Set the value of the Slider.
            %>
    
    
            @(Html.Kendo().Slider()
                  .Name("slider") //The name of the Slider is mandatory. It specifies the "id" attribute of the widget.
                  .Min(0) //Set min value of the Slider.
                  .Max(100) //Set min value of the Slider.
                  .Value(20) //Set the value of the Slider.
            )
    

Event Handling

You can subscribe to all Slider events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example

        <%: Html.Kendo().Slider()
                .Name("slider")
                .Events(e => e
                    .Change("change")
                    .Slide("slide")
                )
        %>
        <script>
        function change() {
            //Handle the change event.
        }

        function slide() {
            //Handle the slide event.
        }
        </script>

        @(Html.Kendo().Slider()
              .Name("slider")
              .Events(e => e
                    .Change("change")
                    .Slide("slide")
              )
        )
        <script>
        function change() {
            //Handle the change event.
        }

        function slide() {
            //Handle the slide event.
        }
        </script>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example

        @(Html.Kendo().Slider()
              .Name("slider")
              .Events(e => e
                  .Change(@<text>
                    function() {
                        //Handle the change event inline.
                    }
                  </text>)
                  .Slide(@<text>
                    function() {
                        //Handle the slide event inline.
                    }
                    </text>)
              )
        )

Reference

Existing Instances

To reference an existing Kendo UI Slider instance, use the jQuery.data() configuration option. Once a reference is established, use the Slider API to control its behavior.

Example
    //Put this after your Kendo UI Slider for ASP.NET MVC declaration.
    <script>
    $(function() {
        //Notice that the Name() of the Slider is used to get its client-side instance.
        var slider = $("#slider").data("kendoSlider");
    });
    </script>

See Also