Reversible Slider in Blazor Range Slider Component

4 Nov 20251 minute to read

Create a reversible slider (values displayed in descending order) by setting the Min property to the maximum value and the Max property to the minimum value. The example below renders a vertical range slider that counts down from 100 to 0.ow

@using System.Globalization;
@using Syncfusion.Blazor.Inputs

<div id="app">
    <SfSlider Min="100" Max="0" Orientation="@SliderOrientation.Vertical" Type=SliderType.Range Value="@Range">
        <SliderTicks Placement="Placement.Before" LargeStep="20"></SliderTicks>
        <SliderTooltip Placement="TooltipPlacement.After" IsVisible="true"></SliderTooltip>
    </SfSlider>
</div>

@code {
    // Specifies the value of the Range Slider.
    int[] Range = { 30, 70 };
}

<style>
    #app {
        color: #008cff;
        height: 340px;
        left: 30%;
        position: absolute;
        width: 50%;
    }
</style>

Blazor Reversible Slider

NOTE

For a horizontal slider, a reversed visual order can be achieved by enabling right-to-left layout with EnableRtl set to true.