Reversible Slider in Blazor Range Slider Component

22 Apr 20231 minute to read

You can create a Range Slider rendered with values in reverse order by setting the Min property to the maximum value and the Max property to the minimum value. An example of how to achieve a Reversible Slider is shown below

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

<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>

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

NOTE

Reversible order can be achieved with horizontal orientation Slider by setting EnableRtl as true.