- Using format API
- Using Events
Contact Support
Format in React Range Slider component
28 Feb 202518 minutes to read
The format
feature is used to customize the units of Slider values to desired format. The formatted values will also be applied to the ARIA attributes of the slider. There are two ways to achieve formatting in the slider.
-
Use the
format
API of the Slider which utilizes ourInternationalization
to format values. -
Customize using events namely
renderingTicks
andtooltipChange
.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let tooltip = { isVisible: true, format: "C2" };
let value = 30;
// Slider ticks customization
let ticks = {
placement: "After",
format: "C2",
largeStep: 20,
smallStep: 10,
showSmallTicks: true
};
return (<div id="container">
<div className="wrap">
<SliderComponent id="slider" min={0} max={100} value={value} tooltip={tooltip} ticks={ticks} />
</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() {
let tooltip = { isVisible: true, format: "C2" };
let value = 30;
// Slider ticks customization
let ticks: TicksDataModel = {
placement: "After",
format: "C2",
largeStep: 20,
smallStep: 10,
showSmallTicks: true
};
return (
<div id="container">
<div className="wrap">
<SliderComponent
id="slider"
min={0}
max={100}
value={value}
tooltip={tooltip}
ticks={ticks}
/>
</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>
Using format API
In this method, we have different predefined formatting styles like Numeric (N), Percentage (P), Currency (C) and #
specifiers. In the example below, we have formatted the ticks
and tooltip
values into percentage.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let tooltip = {
placement: "Before",
isVisible: true,
showOn: "Always",
format: "P0"
};
let value = 0.3;
// Slider ticks customization
let ticks = {
placement: "After",
largeStep: 0.2,
smallStep: 0.1,
showSmallTicks: true,
format: "P0"
};
return (<div id="container">
<div className="wrap">
<SliderComponent id="slider" min={0} max={1} step={0.01} value={value} tooltip={tooltip} ticks={ticks} />
</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() {
let tooltip: TooltipDataModel = {
placement: "Before",
isVisible: true,
showOn: "Always",
format: "P0"
};
let value = 0.3;
// Slider ticks customization
let ticks: TicksDataModel = {
placement: "After",
largeStep: 0.2,
smallStep: 0.1,
showSmallTicks: true,
format: "P0"
};
return (
<div id="container">
<div className="wrap">
<SliderComponent
id="slider"
min={0}
max={1}
step={0.01}
value={value}
tooltip={tooltip}
ticks={ticks}
/>
</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>
Using Events
In this method, we retrieve the values from the Slider events then process them to the desired formatted values.
In this sample, we have customized the ticks
values into weekdays as one formatting and tooltip
values into day of the week as another formatting.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let tooltip = { placement: "Before", isVisible: true };
let value = 2;
// Slider ticks customization
let ticks = { placement: "After", largeStep: 1 };
function renderingTicksHandler(args) {
// Weekdays Array
let daysArr = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thrusday",
"Friday",
"Saturday"
];
// Customizing each ticks text into weeksdays
args.text = daysArr[parseFloat(args.value.toString())];
}
function tooltipChangeHandler(args) {
// Customizing tooltip to display the Day (in numeric) of the week
args.text = "Day " + (Number(args.value) + 1).toString();
}
return (<div id="container">
<div className="wrap">
<SliderComponent id="slider" min={0} max={6} step={1} value={value} tooltip={tooltip} ticks={ticks} tooltipChange={tooltipChangeHandler.bind(this)} renderingTicks={renderingTicksHandler.bind(this)} />
</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() {
let tooltip: TooltipDataModel = { placement: "Before", isVisible: true };
let value = 2;
// Slider ticks customization
let ticks: TicksDataModel = { placement: "After", largeStep: 1 };
function renderingTicksHandler(args: SliderTickEventArgs) {
// Weekdays Array
let daysArr: string[] = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thrusday",
"Friday",
"Saturday"
];
// Customizing each ticks text into weeksdays
args.text = daysArr[parseFloat(args.value.toString())];
}
function tooltipChangeHandler(args: SliderTooltipEventArgs) {
// Customizing tooltip to display the Day (in numeric) of the week
args.text = "Day " + (Number(args.value) + 1).toString();
}
return (
<div id="container">
<div className="wrap">
<SliderComponent
id="slider"
min={0}
max={6}
step={1}
value={value}
tooltip={tooltip}
ticks={ticks}
tooltipChange={tooltipChangeHandler.bind(this) as any}
renderingTicks={renderingTicksHandler.bind(this) as any}
/>
</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>