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

Numeric range slider in React Range Slider component

01 Jul 2022 / 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.jsx
index.html
index.css
index.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        // Slider ticks customization
        this.ticks01 = {
            placement: "After",
            format: "##.## Km",
            largeStep: 20,
            smallStep: 10,
            showSmallTicks: true
        };
        this.tooltip01 = { isVisible: true, format: "##.## Km" };
        this.ticks02 = {
            placement: "After",
            format: "##.#00",
            largeStep: 0.02,
            smallStep: 0.01,
            showSmallTicks: true
        };
        this.tooltip02 = { isVisible: true, format: "##.#00" };
        this.tooltip03 = { isVisible: true, format: "00##" };
        this.ticks03 = {
            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'));
Copied to clipboard
<!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/20.2.36/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.36/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.36/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.36/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>
Copied to clipboard
.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;
}
Copied to clipboard
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'));
Previous
Next
Contents
Contents