Example of Vertical Orientation in Blazor Range Slider Component

Range Slider / Vertical Orientation

This sample demonstrates the rendering of the Blazor Range Slider component Orientation in the vertical direction. Drag the thumb over the bar to select the values between Min and Max.

The Range Slider component allows to select a value or range of values in-between a Min and Max range by dragging the thumb over the slider bar in vertical direction. Three types of Range Sliders in vertical orientation are:

  • Default - Allows to select a single value.
  • MinRange - Allows to select a single value. It highlights a range selection from the minimum value to the current handle value.
  • Range - Allows to select a range of values with two handles that are linked by a range selection.
  • Reverse - Allows to render the component in reverse order. To utilise this, set the maximum value to the Min property and set the minimum value to the Max property.

The drag interval is used to drag both handles using the range bar, which is applicable only to the Range Slider.

In this demo, the Default, MinRange, and Range Slider types can be seen with vertical orientation.

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