Update a Model Field with the RangeSlider

Environment

Product	Telerik UI for ASP.NET Core RangeSlider
Progress Telerik UI for ASP.NET Core version	2024.4.1112

Description

When submitting a form, how can I update a model field with the RangeSlider's start and end values?

Solution

The RangeSlider renders two hidden inputs behind the scene.

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

1. Add a field of type double[] in the view model.
2. Bind the RangeSlider to the field.

C#

public class OrderViewModel
{
    public int OrderID { get; set; }

    public double[] Products { get; set; }
}

C#

public ActionResult Index()
{
    OrderViewModel model = new OrderViewModel() 
    { 
        OrderID = 1, 
        Products = new double[] { 2, 4 } 
    };

    return View(model);
}

[HttpPost]
public ActionResult Submit(OrderViewModel model)
{
    // model.Products contains the updated values

    return View("Success");
}

Razor

@model MyApp.Models.OrderViewModel

@using (Html.BeginForm("Submit", "Home"))
{
    @Html.HiddenFor(model => model.OrderID)
    @(Html.Kendo().RangeSliderFor(model => model.Products))
    <br />
    <input type="submit"  value="Submit" />
} 

Razor

    @model MyApp.Models.OrderViewModel

    @addTagHelper *, Kendo.Mvc

    <form asp-action="Submit" asp-controller="/Home" asp-controller="Home">
        <input asp-for="OrderID" type="hidden" name="OrderID" value="@Model.OrderID" />
        <kendo-rangeslider for="Products" values="@Model.Products">
        </kendo-rangeslider>
        <br />
        <input type="submit" name="submit" value="Submit" />
    </form> 

More ASP.NET Core Slider Resources

• ASP.NET Core Slider Documentation

• ASP.NET Core Slider Demos

• ASP.NET Core Slider Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Slider for ASP.NET Core

• Server-Side API Reference of the Slider for ASP.NET Core

• Server-Side TagHelper API Reference of the Slider for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base