Search results

Numeric range slider in React Range Slider component

05 May 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
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'));
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/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>
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;
}
Contents
Contents