Customize the bar in EJ2 JavaScript Range slider control
15 May 202313 minutes to read
Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the slider bar. The slider bar can be customized with different themes. By default, slider have class name e-slider-track for bar. The class can be overridden with our own color values like the following code snippet.
.e-control.e-slider .e-slider-track .e-range {
background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
}
You can also apply background color for a certain range depending upon slider values, using change event.
change: (args: SliderChangeEventArgs) => {
if (args.value > 0 && args.value <= 25) {
// Change handle and range bar color to green when
(sliderHandle as HTMLElement).style.backgroundColor = 'green';
(sliderTrack as HTMLElement).style.backgroundColor = 'green';
} else if (args.value > 25 && args.value <= 50) {
// Change handle and range bar color to royal blue
(sliderHandle as HTMLElement).style.backgroundColor = 'royalblue';
(sliderTrack as HTMLElement).style.backgroundColor = 'royalblue';
} else if (args.value > 50 && args.value <= 75) {
// Change handle and range bar color to dark orange
(sliderHandle as HTMLElement).style.backgroundColor = 'darkorange';
(sliderTrack as HTMLElement).style.backgroundColor = 'darkorange';
} else if (args.value > 75 && args.value <= 100) {
// Change handle and range bar color to red
(sliderHandle as HTMLElement).style.backgroundColor = 'red';
(sliderTrack as HTMLElement).style.backgroundColor = 'red';
}
}// Initialize slider component
var heightSlider = new ej.inputs.Slider({
// Set the value for slider
value: 30,
min: 0, max: 100
});
heightSlider.appendTo('#height_slider');
// Initialize slider component
var gradientSlider = new ej.inputs.Slider({
// Set slider minimum and maximum values
min: 0, max: 100,
// Set the initial range values for slider
value: 30,
type: 'MinRange'
});
gradientSlider.appendTo('#gradient_slider');
var sliderTrack;
var sliderHandle;
// Initialize slider component
var dynamicColorSlider = new ej.inputs.Slider({
// Set slider minimum and maximum values
min: 0, max: 100,
value: 30,
type: 'MinRange',
// Handler used for slider created event
created: function () {
sliderTrack = document.getElementById('dynamic_color_slider').querySelector('.e-range');
sliderHandle = document.getElementById('dynamic_color_slider').querySelector('.e-handle');
sliderHandle.style.backgroundColor = 'green';
sliderTrack.style.backgroundColor = 'green';
},
// Handler used for slider change event
change: function (args) {
if (args.value > 0 && args.value <= 25) {
// Change handle and range bar color to green when
sliderHandle.style.backgroundColor = 'green';
sliderTrack.style.backgroundColor = 'green';
}
else if (args.value > 25 && args.value <= 50) {
// Change handle and range bar color to royal blue
sliderHandle.style.backgroundColor = 'royalblue';
sliderTrack.style.backgroundColor = 'royalblue';
}
else if (args.value > 50 && args.value <= 75) {
// Change handle and range bar color to dark orange
sliderHandle.style.backgroundColor = 'darkorange';
sliderTrack.style.backgroundColor = 'darkorange';
}
else if (args.value > 75 && args.value <= 100) {
// Change handle and range bar color to red
sliderHandle.style.backgroundColor = 'red';
sliderTrack.style.backgroundColor = 'red';
}
}
});
dynamicColorSlider.appendTo('#dynamic_color_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/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/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="col-lg-12 control-section">
<div class="slider-content-wrapper">
<div class="slider_container">
<div class="slider-labeltext slider_userselect">Height</div>
<!-- Square slider element -->
<div id="height_slider"></div>
</div>
<div class="slider_container">
<div class="slider-labeltext slider_userselect">Gradient color</div>
<div id="gradient_slider"></div>
</div>
<div class="slider_container">
<div class="slider-labeltext slider_userselect">Dynamic thumb and selection bar color</div>
<div id="dynamic_color_slider"></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: visible;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.slider-content-wrapper {
width: 40%;
margin: 0 auto;
min-width: 185px;
}
.slider-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 */
}
.slider-labeltext {
text-align: left;
font-weight: 500;
font-size: 13px;
padding-bottom: 10px;
}
#height_slider .e-handle, #gradient_slider .e-handle {
height: 20px;
width: 20px;
margin-left: -10px;
top: calc(50% - 10px);
}
.slider_container {
margin-top: 40px;
}
#height_slider .e-tab-handle::after {
background-color: #f9920b;
}
#height_slider .e-slider-track {
height: 8px;
top: calc(50% - 4px);
border-radius: 0;
}
#gradient_slider .e-range {
height: 6px;
top: calc(50% - 3px);
border-radius: 5px;
background: -moz-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
background: -o-linear-gradient(left, #e1451d 0%,#e14423 100%);
background: -ms-linear-gradient(left, #e1451d 0%,#e14423 100%);
}
#gradient_slider .e-slider-track {
height: 8px;
top: calc(50% - 4px);
border-radius: 5px;
}