Progress Telerik UI for Blazor
RangeSlider
- The Blazor RangeSlider component lets you increase, decrease and select a range of predefined values by dragging two handles along a track or by clicking it.
- This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
- The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
-
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.
-
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
-
-
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.
-
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.
-
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.
Next Steps
Launch demos
See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.
Download free trial
Try Telerik UI for Blazor with dedicated technical support.