The date formatting can be achieved in ticks
and tooltip
using renderingTicks
and tooltipChange
events, respectively. The process of formatting is explained in the following sample.
import { Slider, SliderTickEventArgs, SliderTooltipEventArgs } from '@syncfusion/ej2-inputs';
// Initialize slider control
let dateObj: Slider = new Slider({
/**
* Initialize the min and max values of the slider using JavaScript date functions
* new Date (Year, Month, day, hours, minutes, seconds, milliseconds)
*/
min: new Date("2013-06-13").getTime(),
value: new Date("2013-06-15").getTime(),
max: new Date("2013-06-21").getTime(),
// 86400000 milliseconds for a day
step: 86400000,
tooltipChange: function (args: SliderTooltipEventArgs) {
let totalMiliSeconds = Number(args.text);
// Convert the current milliseconds to the respective date in desired format
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
},
tooltip: {
placement: 'Before',
isVisible: true
},
renderingTicks: function (args: SliderTickEventArgs) {
let totalMiliSeconds = Number(args.value);
// Convert the current milliseconds to the respective date in desired format
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
},
ticks: {
placement: 'After',
// 2 * 86400000 milliseconds for two days
largeStep: 2 * 86400000
},
showButtons: true
});
// Render initialized Slider
dateObj.appendTo('#slider');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Slider</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 Slider Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.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='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<div id="slider">
</div>
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
box-sizing: border-box;
height: 260px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
The time formatting can be achieved in the same manner as date formatting using renderingTicks
and change
events. The process of time formatting is
explained in the following sample.
import { Slider, SliderTickEventArgs, SliderTooltipEventArgs } from '@syncfusion/ej2-inputs';
// Initialize slider control
let timeObj: Slider = new Slider({
/**
* Initialize the min and max values of the slider using JavaScript date functions
* new Date (Year, Month, day, hours, minutes, seconds, milliseconds)
*/
min: new Date(2013, 6, 13, 11).getTime(),
max: new Date(2013, 6, 13, 17).getTime(),
value: new Date(2013, 6, 13, 13).getTime(),
// 3600000 milliseconds = 1 Hour
step: 3600000,
tooltipChange: function (args: SliderTooltipEventArgs) {
let totalMiliSeconds = Number(args.text);
let custom = { hour: '2-digit', minute: '2-digit' };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
},
tooltip: {
placement: 'Before',
isVisible: true
},
renderingTicks: function (args: SliderTickEventArgs) {
let totalMiliSeconds = Number(args.value);
let custom = { hour: '2-digit', minute: '2-digit' };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
},
ticks: {
placement: 'After',
// 2 * 3600000 milliseconds = 2 Hour
largeStep: 2 * 3600000
},
showButtons: true
});
// Render initialized slider
timeObj.appendTo('#slider');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Slider</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 Slider Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.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='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<div id="slider">
</div>
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
box-sizing: border-box;
height: 260px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
The numeric values can be formatted into different decimal digits or fixed number of whole numbers or to represent units. The numeric processing is demonstrated as follows.
import { Slider } from '@syncfusion/ej2-inputs';
// Initialize slider control
let kilometerObj: Slider = new Slider({
min: 0, max: 100, step: 1, value: 30,
// Apply two decimal specifiers formatting if any decimal values are processed with 'Km' text appended to the value
tooltip: { isVisible: true, format: '##.## Km' },
// Apply two decimal specifiers formatting if any decimal values are processed with 'Km' text appended to the value
ticks: { placement: 'After', format: '##.## Km', largeStep: 20, smallStep: 10, showSmallTicks: true }
});
// Render initialized slider
kilometerObj.appendTo('#slider');
// Initialize slider control
let decimalObj: Slider = new Slider({
min: 0.1, max: .2, step: 0.01, value: 0.13,
// Apply three decimal specifiers formatting if any decimal values are processed then reset will be appened with two zero
tooltip: { isVisible: true, format: '##.#00' },
// Apply three decimal specifiers formatting if any decimal values are processed then reset will be appened with two zero
ticks: { placement: 'After', format: '##.#00', largeStep: 0.02, smallStep: 0.01, showSmallTicks: true }
});
// Render initialized slider
decimalObj.appendTo('#slider1');
// Initialize slider control
let sliderObj: Slider = new Slider({
min: 0, max: 100, step: 1, value: 30,
// Apply numberic formatting with two leading zero for tooltip
tooltip: { isVisible: true, format: '00##' },
// Apply numberic formatting with two leading zero for ticks
ticks: { placement: 'After', format: '00##', largeStep: 20, smallStep: 10, showSmallTicks: true }
});
// Render initialized slider
sliderObj.appendTo('#slider2');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Slider</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 Slider Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.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='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<div class='label'>Slider formatted with unit representation</div>
<div id="slider">
</div>
</div>
<div class='wrap'>
<div class='label'>Slider formatted with three decimal specifiers</div>
<div id="slider1">
</div>
</div>
<div class='wrap'>
<div class='label'>Slider formatted with two leading zeros</div>
<div id="slider2">
</div>
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}