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.
- Add a field of type
double[]in the view model.
- Bind the RangeSlider to the field.
public class OrderViewModel
{
public int OrderID { get; set; }
public double[] Products { get; set; }
}
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");
}
@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" />
}
@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>