Progress Telerik UI for Blazor

RangeSlider

Name: UI for Blazor
Brand: Telerik
Rating: 9.2 (22 reviews)

Overview

The Telerik UI for Blazor RangeSlider component is an input control, complementary to the Slider. It expands on the Slider capabilities by providing an intuitive interface for users to enter a numerical range instead of a single number. With its powerful customization options, it will match any design or use case scenario with little work.

See Demo
Customization
Multiple customization options are available for this control. Examples include:
- Controlling the min, max and step values
- Controlling the component orientation (vertical or horizontal)
- Specifying the distance between two ticks
- Setting how many digits should the value be rounded to
See Demo
Range Slider Label Templates

The control allows you to change how labels are rendered along the bar to approximate your application style. Doing that is as easy as providing an HTML template with your desired layout to the RangeSlider.

See Demo
Events

The pair of StartValueChanged and EndValueChanged events are fired just after changing the start or end value, respectively.
Blazor Range Slider Theming

The Telerik Blazor Range Slider component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes, style a specific component instance or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.
Keyboard Navigation

When the RangeSlider has focus, you can use the keyboard to navigate and select the desired value. Arrow keys and PageUp/PageDown keys move the currently selected end of the range, Home/End sets both ends to the predefined min or max value and Tab can help you switch between the two ends of the range.

See Demo
Globalization

The Telerik Blazor RangeSlider component detects the user’s current location and automatically updates the number formats to match the user’s settings. See the Globalization Demo for examples.