Edit this page

Use the RangeSliderFor Method

The RangeSlider HtmlHelper renders two hidden inputs behind the scenes.

This behavior helps you consume and process a model property that holds an array of 2 numbers—start and end.

The following example demonstrates a very basic approach for using, consuming, and updating such a model with the RangeSliderFor method.

public class MyModel
    public int ID { get; set; }
    public double[] values { get; set; }
public ActionResult Index()
    return View(new MyModel { ID = 1, values=new double[] { 1, 2 } });

public ActionResult UpdateMyModel(MyModel model)
    // ToDo: Update the model in the database
    return View("Index", model);
@model TelerikMvcApp.Models.MyModel

@using (Html.BeginForm("UpdateMyModel", "Home"))
    @Html.HiddenFor(model => model.ID)
    @(Html.Kendo().RangeSliderFor(model => model.values))
    <input type="submit"  value="Submit" />

See Also