Progress Telerik UI for Blazor

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.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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 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 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

  • 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. 
    Telerik UI for Blazor Globalization and Localization

All Blazor Components

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.