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. The following example demonstrates the basic configuration for the Slider component.
@(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>
Functionality and Features
- Appearance—Use different configuration settings that control the styling of the component.
- Events—Handle the component events and implement any custom functionality.
- Accessibility—The Slider is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.