background

UI for Blazor

Blazor RangeSlider

  • The Blazor RangeSlider component lets you increase, decrease and select a range of predefined values.
  • Part of the Telerik UI for Blazor library along with 110+ professionally-designed UI components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
Telerik UI for Blazor RangeSlider - Header
  • Expand Slider Capabilities with Blazor RangeSlider

    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 the Blazor RangeSlider demo
    Telerik UI for Blazor RangeSlider - Overview
  • 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

    Telerik UI for Blazor RangeSlider - Customization
  • 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. 

    Explore the Blazor RangeSlider label templates
    Telerik UI for Blazor RangeSlider - Label Template
  • Events

    The pair of StartValueChanged and EndValueChanged events are fired just after changing the start or end value, respectively. 
    Telerik UI for Blazor Rich Text Editor Events
  • 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), Bootstrap (which looks like the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI). 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

    Range-Slider---Theming
  • 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. 
    Telerik UI for Blazor Keyboard Navigation
  • 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. 
    Blazor Editor Globalization and Localization
  • Right-to-Left (RTL) Support

    The Telerik UI for Blazor Range Slider component supports right-to-left configuration. The RTL functionality is supported my most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.

    Learn more in our Blazor Right-to-Left Support documentation 

    Blazor RTL Support

All Blazor Components

Next Steps