Blazor Range Slider - Vertical Orientation

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

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

• Default - Allows selection of a single value.
• MinRange - Allows selection of a single value with highlighted range selection from the minimum value to the current handle value.
• Range - Allows selection of a range of values with two handles linked by a range selection.
• Reverse - Renders the component in reverse order by setting the maximum value to the Min property and the minimum value to the Max property.

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

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