ASP.NET Core Slider Overview
The Slider is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Slider TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Slider widget.
The Slider provides a rich input for selecting numeric values. The Slider can either present one handle and two opposing buttons for selecting a single numeric value, or two handlers for defining a range of numeric values. Unlike the HTML5 range input, the Slider enables the consistent experience across browsers and delivers rich API calls and event models.
Initializing the Slider
The following example demonstrates how to how to define 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.
)
@(Html.Kendo().RangeSlider()
.Name("rangeslider")
.Min(0)
.Max(10)
.SmallStep(1)
.LargeStep(10))
<kendo-slider name="slider"
min="0" max="100"
small-step="1"
value="20">
</kendo-slider>
<kendo-rangeslider name="rangeslider"
increase-button-title="Right"
decrease-button-title="Left"
min="0" max="10"
small-step="1"
large-step="10">
</kendo-rangeslider>
Basic Configuration
The Slider configuration options are passed as attributes.
@(Html.Kendo().Slider()
.Name("slider")
.IncreaseButtonTitle("Right")
.DecreaseButtonTitle("Left")
.Min(0)
.Max(30)
.SmallStep(1)
.LargeStep(10)
.Value(18)
.HtmlAttributes(new { @class = "temperature" }))
<kendo-slider name="slider"
increase-button-title="Right"
decrease-button-title="Left"
min="0" max="30"
small-step="1"
large-step="10"
value="18" class="temperature" title="slider">
</kendo-slider>
Events
You can subscribe to all Slider events. For a complete example on basic Slider events, refer to the demo on using the events of the Slider.
Handling by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().Slider()
.Name("slider")
.Events(e => e
.Change("change")
.Slide("slide")
)
)
<script>
function change(e) {
// Handle the change event.
}
function slide(e) {
// Handle the slide event.
}
</script>
<kendo-slider name="slider"
on-change="change"
on-slide="slide"
</kendo-slider>
<script>
function change(e) {
// Handle the change event.
}
function slide(e) {
// Handle the slide event.
}
</script>
Handling by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
@(Html.Kendo().Slider()
.Name("slider")
.Events(e => e
.Change(@<text>
function(e) {
// Handle the change event inline.
}
</text>)
.Slide(@<text>
function(e) {
// Handle the slide event inline.
}
</text>)
)
)
Referencing Existing Instances
To reference an existing Telerik UI Slider instance, use the jQuery.data() configuration option. Once a reference is established, use the Slider client-side API to control its behavior.
// Place the following after your Telerik UI Slider for ASP.NET Core declaration.
<script>
$(function() {
// The Name() of the Slider is used to get its client-side instance.
var slider = $("#slider").data("kendoSlider");
});
</script>