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

<div class='wrap'>
    <ejs-slider id="reversible" min="100" max="0" orientation="Vertical" type="Range" value="ViewBag.range">
        <e-slider-ticksdata placement="Before" showSmallTicks="true" largeStep="20" smallStep="5"></e-slider-ticksdata>
        <e-slider-tooltipdata isVisible="true" placement="Before"></e-slider-tooltipdata>
    </ejs-slider>
</<div>


<style>
    .wrap {
        box-sizing: border-box;
        height: 260px;
        margin: 0 auto;
        padding: 30px 10px;
        width: 260px;
    }
</style>

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.