Reversible Range Slider in EJ2 JavaScript

3 Mar 20253 minutes to read

You can create a Range Slider with values rendered 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:

// Initialize Range Slider Control
var sliderObj = new ej.inputs.Slider({
    ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
    tooltip: { placement: 'Before', isVisible: true, showOn: 'Always' },
    type: 'Range',
    // vertical orientation
    orientation: 'Vertical',
    // Set maximum value to min
    min: 100,
    // Set minimum value to max
    max: 0,
    // Slider current value
    value: [30, 70]
});
// Render initialized Range Slider Control
sliderObj.appendTo('#slider');
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 Range Slider</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Essential JS 2 Range Slider Control">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <div id="container">
    <div class="wrap">
      <div id="slider">
      </div>
    </div>
  </div>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
  <style>
    .wrap {
      box-sizing: border-box;
      height: 260px;
      margin: 0 auto;
      padding: 30px 10px;
      width: 260px;
    }
  </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

The reversible order can be achieved with the Horizontal orientation of the Range Slider by setting enableRtl to true.