Contents
- Achieve date format
- Achieve time format
- Customize numeric Value
Having trouble getting help?
Contact Support
Contact Support
Format Value using Slider in EJ2 JavaScript Range Slider Control
10 Feb 202518 minutes to read
Achieve date format
Date formatting can be achieved in ticks
and tooltip
using the renderingTicks
and tooltipChange
events, respectively. The process of formatting is explained in the following sample.
// Initialize Range Slider Control
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 Range Slider Control
dateObj.appendTo('#slider');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 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 Range Slider Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/30.1.37/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>
<style>
.wrap {
box-sizing: border-box;
height: 260px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
</style>
</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%;
}
Achieve time format
Time formatting can be achieved in the same manner as date formatting using the renderingTicks
and change
events. The process of time formatting is explained in the following sample.
// Initialize Range Slider Control
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 Range Slider Control
timeObj.appendTo('#slider');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 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 Range Slider Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/30.1.37/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>
<style>
.wrap {
box-sizing: border-box;
height: 260px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
</style>
</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%;
}
Customize numeric Value
Numeric values can be formatted into different decimal digits, fixed numbers of whole numbers, or to represent units. The numeric processing is demonstrated as follows.
// Initialize Range Slider Control
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 Range Slider Control
kilometerObj.appendTo('#slider');
// Initialize Range Slider Control
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 appended with two zero
tooltip: { isVisible: true, format: '##.#00' },
// Apply three decimal specifiers formatting if any decimal values are processed then reset will be appended with two zero
ticks: { placement: 'After', format: '##.#00', largeStep: 0.02, smallStep: 0.01, showSmallTicks: true }
});
// Render initialized Range Slider Control
decimalObj.appendTo('#slider1');
// Initialize Range Slider Control
var sliderObj = new ej.inputs.Slider({
min: 0, max: 100, step: 1, value: 30,
// Apply numeric formatting with two leading zero for tooltip
tooltip: { isVisible: true, format: '00##' },
// Apply numeric formatting with two leading zero for ticks
ticks: { placement: 'After', format: '00##', largeStep: 20, smallStep: 10, showSmallTicks: true }
});
// Render initialized Range Slider Control
sliderObj.appendTo('#slider2');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 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 Range Slider Control">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/30.1.37/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>
<style>
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}
</style>
</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%;
}