RangeSlider

RangeSlider Overview

Range sliders encourage exploration rather than precision, therefore it is advisable to use them when the user intends to set an approximate range among multiple options or see the selection outcome in real-time, such as a price range.

The RangeSlider allows the user to select the minimum and maximum values on a slider track with predefined value steps. To choose the desired range, the user moves the slider handles along the track or clicks (taps) the desired value.

Live Demo

Appearance

The RangeSlider provides 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 RangeSlider can acquire the following states which you can set by using the following classes:

• A RangeSlider in its normal state appears active, and is usable and clickable.
• k-disabled—The disabled state indicates that a RangeSlider 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, RangeSliders in their disabled state are faded.

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

• k-hover—The hover state of the RangeSlider handle is applied when the user hovers over it but does not click it.
• k-focus—The focus state of the RangeSlider 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:

1. Label (optional)
2. Selection
3. Track
4. Slider handle
5. Tick (optional)

Layout

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

1. Horizontal
2. Vertical

Predefined Steps

You can configure the way the Telerik and Kendo UI RangeSlider divides its range and updates the value by using the step options:

• Small steps—Based on the min and max values, the RangeSlider splits the track into equal ticks.
• Large steps—The property specifies the interval after which the step will render a large tick and a label (if any).

1. Small steps
2. Large steps

Ticks

The Telerik and Kendo UI RangeSlider lets users configure the placement and rendering of the track ticks.

1. Top and bottom
2. Bottom only
3. Top only
4. None

Framework-Specific Documentation

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

Kendo UI for Angular RangeSliderFind more information about the Kendo UI for Angular RangeSlider in the official product documentation of the component.

Telerik UI for Blazor RangeSliderFind more information about the Telerik UI for Blazor RangeSlider in the official product documentation of the component.

Kendo UI for jQuery RangeSliderFind more information about the Kendo UI for jQuery RangeSlider in the official product documentation of the component.

KendoReact RangeSliderFind more information about the KendoReact RangeSlider in the official product documentation of the component.

Kendo UI for Vue RangeSliderFind more information about the Kendo UI for Vue RangeSlider in the official product documentation of the component.