Appearance
In this article, you will find information about the appearance options and rendering of the Telerik UI for ASP.NET Core Slider.
Options
The Slider component provides the following appearance options:
-
Orientation()—Configures the orientation of the component. -
ShowButtons()—Toggles the visibility of the increase and decrease buttons of a Slider. -
TickPlacement()—Defines the location of the tick marks.
Orientation
To display the Slider vertically, set the Orientation() option to Vertical. By default, the Slider is displayed horizontally.
@(Html.Kendo().Slider()
.Name("slider")
.Orientation(SliderOrientation.Vertical)
.Value(5)
)
@addTagHelper *, Kendo.Mvc
<kendo-slider name="slider"
value="5"
orientation="SliderOrientation.Vertical">
</kendo-slider>
ShowButtons
Disable the ShowButtons() option to hide the increase and decrease buttons of the Slider. The buttons are visible by default.
@(Html.Kendo().Slider()
.Name("slider")
.Value(5)
.ShowButtons(false)
)
@addTagHelper *, Kendo.Mvc
<kendo-slider name="slider" show-buttons="false" value="5">
</kendo-slider>
TickPlacement
To specify the location of the tick marks on the Slider, use the TickPlacement() option with any of the following values:
-
None—The tick marks are not visible. -
TopLeft—The tick marks are located on the top of the horizontal Slider and on the left of the vertical Slider. -
BottomRight—The tick marks are located on the bottom of the horizontal Slider and on the right side of the vertical Slider. -
Both—The tick marks are located on both sides of the Slider (default option).
@(Html.Kendo().Slider()
.Name("slider")
.Value(5)
.TickPlacement(SliderTickPlacement.TopLeft)
)
@addTagHelper *, Kendo.Mvc
<kendo-slider name="slider" tick-placement="SliderTickPlacement.TopLeft" value="5">
</kendo-slider>
Rendering
Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the Components Rendering Overview article.
To review the latest rendering of the component, refer to the HTML specifications in the Kendo UI Themes Monorepo. The tests folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.