Slider appearance can be customized via CSS. By overriding the slider CSS classes, the slider limit bar can be customized. Here, the limit bar is customized with different background color. By default, the slider has class e-limits for limits bar. You can override the class with our own color values as given in the following code snippet.
.e-slider-container.e-horizontal .e-limits {
background-color: rgba(69, 100, 233, 0.46);
}var minrangeObj = new ej.inputs.Slider({
// Set slider minimum and maximum values
min: 0, max: 100,
// Set the value for slider
value: 30,
// Set the step value
step: 1,
// Initialize ticks with placement, largestep, smallstep
ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
// Set the type for slider
type: 'MinRange',
// Set the limit values for the slider
limits: { enabled: true, minStart: 10, minEnd: 40 },
// Initialize tooltip with placement and showOn
tooltip: { isVisible: true, placement: 'Before', showOn: 'Focus' }
});
minrangeObj.appendTo('#minrange');
// Initialize slider Component
var rangeObj = new ej.inputs.Slider({
// Set slider minimum and maximum values
min: 0, max: 100,
// Set the initial range values for slider
value: [30, 70],
// Set the step value
step: 1,
// Set the type to render range slider
type: 'Range',
// Initialize ticks with placement, largestep, smallstep
ticks: { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true },
// Set the limit values for the slider
limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 },
// Initialize tooltip with placement and showOn
tooltip: { isVisible: true, placement: 'Before', showOn: 'Focus' }
});
rangeObj.appendTo('#range');
// Initialize NumericTextBox
var minStart = new ej.inputs.NumericTextBox({
value: 10,
min: 0,
max: 100,
change: minStartChange
});
minStart.appendTo('#minStart');
var minEnd = new ej.inputs.NumericTextBox({
value: 40,
min: 0,
max: 100,
change: minEndChange
});
minEnd.appendTo('#minEnd');
var maxStart = new ej.inputs.NumericTextBox({
value: 60,
min: 0,
max: 100,
change: maxStartChange
});
maxStart.appendTo('#maxStart');
var maxEnd = new ej.inputs.NumericTextBox({
value: 90,
min: 0,
max: 100,
change: maxEndChange
});
maxEnd.appendTo('#maxEnd');
// Initialize Checkbox
var fixedOne = new ej.buttons.CheckBox({ change: fixOne });
fixedOne.appendTo('#fixedOne');
var fixedSecond = new ej.buttons.CheckBox({ change: fixSecond });
fixedSecond.appendTo('#fixedSecond');
// Eventlisteners to lock first handle of the both sliders
function fixOne(args) {
minrangeObj.limits.startHandleFixed = args.checked;
rangeObj.limits.startHandleFixed = args.checked;
}
// Eventlisteners to lock second handle of the both sliders
function fixSecond(args) {
minrangeObj.limits.endHandleFixed = args.checked;
rangeObj.limits.endHandleFixed = args.checked;
}
// Eventlisteners to change limit values for both sliders
function minStartChange(args) {
minrangeObj.limits.minStart = args.value;
rangeObj.limits.minStart = args.value;
}
function minEndChange(args) {
minrangeObj.limits.minEnd = args.value;
rangeObj.limits.minEnd = args.value;
}
function maxStartChange(args) {
minrangeObj.limits.maxStart = args.value;
rangeObj.limits.maxStart = args.value;
}
function maxEndChange(args) {
minrangeObj.limits.maxEnd = args.value;
rangeObj.limits.maxEnd = args.value;
}<!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/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="col-lg-8 control-section">
<div class="content-wrapper">
<div class="sliderwrap">
<label class="userselect">MinRange Slider With Limits</label>
<div id="minrange"></div>
</div>
<div class="sliderwrap">
<label class="userselect">Range Slider With Limits</label>
<div id="range"></div>
</div>
</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%;
}
.content-wrapper {
width: 52%;
margin: 0 auto;
min-width: 185px;
}
.sliderwrap {
margin-top: 45px;
}
.e-bigger .content-wrapper {
width: 80%;
}
.sliderwrap label {
padding-bottom: 50px;
font-size: 13px;
font-weight: 500;
margin-top: 15px;
display: block;
}
.userselect {
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Standard syntax */
}
.property-custom td {
padding: 5px;
}
#range .e-limits, #minrange .e-limits {
background-color: #ccc;
background-color: rgba(69, 100, 233, 0.46);
}