Reversible Range Slider in React

10 Jan 20259 minutes to read

You can create a Range Slider 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.

index.jsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
  // Slider ticks customization
  let ticks01 = {
    placement: "After",
    format: "##.## Km",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };
  let tooltip01 = { isVisible: true, format: "##.## Km" };
  let ticks02 = {
    placement: "After",
    format: "##.#00",
    largeStep: 0.02,
    smallStep: 0.01,
    showSmallTicks: true
  };
  let tooltip02 = { isVisible: true, format: "##.#00" };
  let tooltip03 = { isVisible: true, format: "00##" };
  let ticks03 = {
    placement: "After",
    format: "00##",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };
  return (<div id="container">
    <div className="wrap">
      <div className="label">Slider formatted with unit representation</div>
      <SliderComponent id="slider" min={0} max={100} value={30} step={1} tooltip={tooltip01} ticks={ticks01} />
    </div>

    <div className="wrap">
      <div className="label">Slider formatted with three decimal specifiers</div>
      <SliderComponent id="slider1" min={0.1} max={0.2} value={0.13} step={0.01} tooltip={tooltip02} ticks={ticks02} />
    </div>

    <div className="wrap">
      <div className="label">Slider formatted with two leading zeros</div>
      <SliderComponent id="slider2" min={0} max={100} value={30} step={1} tooltip={tooltip03} ticks={ticks03} />
    </div>
  </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  // Slider ticks customization
  let ticks01: TicksDataModel = {
    placement: "After",
    format: "##.## Km",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };
  let tooltip01: TooltipDataModel = { isVisible: true, format: "##.## Km" };

  let ticks02: TicksDataModel = {
    placement: "After",
    format: "##.#00",
    largeStep: 0.02,
    smallStep: 0.01,
    showSmallTicks: true
  };
  let tooltip02: TooltipDataModel = { isVisible: true, format: "##.#00" };

  let tooltip03: TooltipDataModel = { isVisible: true, format: "00##" };
  let ticks03: TicksDataModel = {
    placement: "After",
    format: "00##",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };

  return (
    <div id="container">
      <div className="wrap">
        <div className="label">Slider formatted with unit representation</div>
        <SliderComponent
          id="slider"
          min={0}
          max={100}
          value={30}
          step={1}
          tooltip={tooltip01}
          ticks={ticks01}
        />
      </div>

      <div className="wrap">
        <div className="label">Slider formatted with three decimal specifiers</div>
        <SliderComponent
          id="slider1"
          min={0.1}
          max={0.2}
          value={0.13}
          step={0.01}
          tooltip={tooltip02}
          ticks={ticks02}
        />
      </div>

      <div className="wrap">
        <div className="label">Slider formatted with two leading zeros</div>
        <SliderComponent
          id="slider2"
          min={0}
          max={100}
          value={30}
          step={1}
          tooltip={tooltip03}
          ticks={ticks03}
        />
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.css

.sliderwrap {
  margin-top: 20px;
}

.sliderwrap label {
  font-size: 13px;
  font-weight: 100;
  margin-top: 15px;
  padding-bottom: 15px;
}

.wrap {
  box-sizing: border-box;
  height: 100px;
  margin: 0 auto;
  padding: 30px 10px;
  width: 460px;
}

.wrap .label {
  text-align: center;
}

.labeltext {
  text-align: center;
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React 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 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

Reversible order can also be achieved with a Horizontal orientation Slider by setting enableRtl to true.