---
title: Overview
position: 1
seo_title: Overview of the Slider Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Slider component, check out the extensive set of available options in its live
  demo, and master its appearance by setting the layout as you wish on the fly.
---
## Slider Overview

The Slider component is a versatile UI element that allows users to select values within a specified range by dragging a handle along a track. It lets you enhance the user experience in web and application interfaces by tackling various use cases like adjusting settings, filtering data, or selecting numerical values.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/inputs/slider/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/slider/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/slider/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/inputs/slider/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/inputs/slider/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/slider"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/slider"}],"demo":"components/slider/overview"}'></LiveDemo>

### Appearance

Sliders provide built-in styling options that grant visually appealing and flexible rendering experience.

#### States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI Slider can acquire the following states which you can set by using the following classes:

* A Slider in its normal state appears active, and is usable and clickable.
* `k-disabled`&mdash;The disabled state indicates that a Slider is temporarily unclickable because, for example, the page requires additional user input or something important is missing before the user continues to the next step. To indicate that they are unavailable, Sliders in their disabled state are faded.

The Slider's handle has its own states that are independent from the states of the Slider component itself:

* `k-hover`&mdash;The hover state of the Slider handle is applied when the user hovers over it but does not click it.
* `k-focus`&mdash;The focus state of the Slider handle is triggered when the user navigates to it by keyboard, voice, or mouse click.

#### Anatomy

The anatomy of the Slider summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Side buttons (optional)"},{"text":"Tick (optional)"},{"text":"Handle"},{"text":"Label (optional)"},{"text":"Selection"},{"text":"Track"}]}'>![Anatomy of the Telerik and Kendo UI Slider](images/components-slider-overview-anatomy.png "The elements of the Telerik and Kendo UI Slider component")</BlueprintImage>

#### Layout

The Telerik and Kendo UI Slider component provides both horizontal and vertical alignment for flexible integration into various user interface layouts:

<BlueprintImage data='{"description":"","labels":[{"text":"Horizontal"},{"text":"Vertical"}]}'>![Two Telerik and Kendo UI Slider components demonstrating the horizontal and vertical layout respectively](images/components-slider-overview-layout.png "The horizontal and the vertical layout of the Telerik and Kendo UI Slider")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Slider","description":"Find more information about the Kendo UI for Angular Slider in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/inputs/slider/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Slider","description":"Find more information about the Telerik UI for Blazor Slider in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/slider/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Slider","description":"Find more information about the Kendo UI for jQuery Slider in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/slider/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Slider","description":"Find more information about the KendoReact Slider in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/inputs/slider/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Slider","description":"Find more information about the Kendo UI for Vue Slider in the official product documentation of the component.","url":"http://www.telerik.com/kendo-vue-ui/components/inputs/slider/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Slider","description":"Find more information about the Telerik UI for ASP.NET Core Slider component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/editors/slider/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Slider","description":"Find more information about the Telerik UI for ASP.NET MVC Slider component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/editors/slider/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>