Blazor Range Slider - Keyboard Navigation

Range Slider / Keyboard Navigation

The Blazor Range Slider can be accessed through keyboard shortcuts. In the following sample, various key combinations have been used to access the Range Slider functionalities interactively.

Loading Syncfusion Blazor Server Demos…

The Range Slider has built-in keyboard support and allows you to access its functionalities using a keyboard alone. The supported keys are as follows.

  • Focus
    • Alt + J - Focuses on the first Blazor component of the sample.
  • Range Slider
    • Right arrow or Up arrow - Increases the value of the Range Slider.
    • Left arrow or Down arrow - Decreases the value of the Range Slider.
    • Home - Moves to the start value (for Range Slider, when the second thumb is focused and the Home key is pressed, it moves to the first thumb value).
    • End - Moves to the end value (for Range Slider, when the first thumb is focused and the End key is pressed, it moves to the second thumb value).
    • Page up - Increases the Range Slider value based on the LargeStep value (for the Range Slider, when the first thumb is focused and the Page Up key is pressed, it moves until to the second thumb value).
    • Page down - Decreases the Range Slider value based on the LargeStep value (for the Range Slider, when the second thumb is focused and the Page Down key is pressed, it moves until to the first thumb value).
    • Tab - Focus on the Range Slider handle (move the focus between the handles in the Range Slider).
Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE