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.
// Initialize slider component
var dateObj = new ej.inputs.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) {
var totalMiliSeconds = Number(args.text);
// Convert the current milliseconds to the respective date in desired format
var custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
},
tooltip: {
placement: 'Before',
isVisible: true
},
renderingTicks: function (args) {
var totalMiliSeconds = Number(args.value);
// Convert the current milliseconds to the respective date in desired format
var 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/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="wrap">
<div id="slider">
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
// Initialize slider component
var timeObj = new ej.inputs.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) {
var totalMiliSeconds = Number(args.text);
var custom = { hour: '2-digit', minute: '2-digit' };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
},
tooltip: {
placement: 'Before',
isVisible: true
},
renderingTicks: function (args) {
var totalMiliSeconds = Number(args.value);
var 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/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="wrap">
<div id="slider">
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
// Initialize slider component
var kilometerObj = new ej.inputs.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 component
var decimalObj = new ej.inputs.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 component
var sliderObj = new ej.inputs.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/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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;
}