React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Numeric range slider in React Range Slider component

23 Feb 2021 / 2 minutes to read

The numeric values can be formatted into different decimal digits or fixed number of whole numbers or to represent the units. The Numeric processing is demonstrated below.

Source
Preview
index.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

export default class App extends React.Component<{}, {}> {
  // Slider ticks customization
  public ticks01: TicksDataModel = {
    placement: "After",
    format: "##.## Km",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };
  public tooltip01: TooltipDataModel = { isVisible: true, format: "##.## Km" };

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

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

  render() {
    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={this.tooltip01}
            ticks={this.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={this.tooltip02}
            ticks={this.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={this.tooltip03}
            ticks={this.ticks03}
          />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

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

</html>
.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;
}
Previous
Next
Contents
Contents