Reversible Range Slider

30 Jan 20251 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 Range Slider is shown below

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs

@Html.EJS().Slider("reversible")
     .Min(100)
     .Max(0)
     .Value(ViewBag.range)
     .Enabled(true)
     .Type(SliderType.Range)
     .Orientation(SliderOrientation.Vertical)
     .Ticks(new SliderTicksData { Placement = Placement.Before, LargeStep = 20, SmallStep = 5, ShowSmallTicks = true })
     .Tooltip(new SliderTooltipData { IsVisible = true, Placement = TooltipPlacement.Before }).Render()

Reversible-slider.cs

public ActionResult Reverse()
{
    ViewBag.range = new int[] { 30, 70 };
    return View();
}

Reversible order can be achieved with Horizontal orientation Range Slider by setting enableRtl as true.