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);
}import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { Slider, NumericTextBox, ChangeEventArgs } from '@syncfusion/ej2-inputs';
import { CheckBox, ChangeEventArgs as CheckBoxChange } from '@syncfusion/ej2-buttons';
// tslint:disable-next-line:max-func-body-length
// Initialize slider control
let minrangeObj: Slider = new 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 control
let rangeObj: Slider = new 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
let minStart: NumericTextBox = new NumericTextBox({
value: 10,
min: 0,
max: 100,
change: minStartChange
});
minStart.appendTo('#minStart');
let minEnd: NumericTextBox = new NumericTextBox({
value: 40,
min: 0,
max: 100,
change: minEndChange
});
minEnd.appendTo('#minEnd');
let maxStart: NumericTextBox = new NumericTextBox({
value: 60,
min: 0,
max: 100,
change: maxStartChange
});
maxStart.appendTo('#maxStart');
let maxEnd: NumericTextBox = new NumericTextBox({
value: 90,
min: 0,
max: 100,
change: maxEndChange
});
maxEnd.appendTo('#maxEnd');
// Initialize Checkbox
let fixedOne: CheckBox = new CheckBox({ change: fixOne });
fixedOne.appendTo('#fixedOne');
let fixedSecond: CheckBox = new CheckBox({ change: fixSecond });
fixedSecond.appendTo('#fixedSecond');
// Eventlisteners to lock first handle of the both sliders
function fixOne(args: CheckBoxChange): void {
minrangeObj.limits.startHandleFixed = args.checked;
rangeObj.limits.startHandleFixed = args.checked;
}
// Eventlisteners to lock second handle of the both sliders
function fixSecond(args: CheckBoxChange): void {
minrangeObj.limits.endHandleFixed = args.checked;
rangeObj.limits.endHandleFixed = args.checked;
}
// Eventlisteners to change limit values for both sliders
function minStartChange(args: ChangeEventArgs): void {
minrangeObj.limits.minStart = args.value;
rangeObj.limits.minStart = args.value;
}
function minEndChange(args: ChangeEventArgs): void {
minrangeObj.limits.minEnd = args.value;
rangeObj.limits.minEnd = args.value;
}
function maxStartChange(args: ChangeEventArgs): void {
minrangeObj.limits.maxStart = args.value;
rangeObj.limits.maxStart = args.value;
}
function maxEndChange(args: ChangeEventArgs): void {
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/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://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="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>
</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);
}