Format value using slider in EJ2 JavaScript Range slider control
15 May 202316 minutes to read
Achieve date format
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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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;
}Achieve time format
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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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;
}Customize numeric Value
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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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;
}