Having trouble getting help?
Contact Support
Contact Support
Numeric range Slider in React Range Slider component
28 Feb 20259 minutes to read
Numeric values in the Range Slider can be formatted to display different decimal places, a fixed number of whole numbers, or to represent specific units. The following example demonstrates numeric processing in a Range Slider.
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'));
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'));
.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;
}
<!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>