Numeric range Slider in React Range Slider component

21 Feb 20269 minutes to read

Numeric values in the Range Slider can be formatted to display different decimal places, fixed whole numbers, or specific units. The following example demonstrates numeric value formatting.

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/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.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>