Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the thumb. By default, slider has unique class e-handle for slider thumb. You can override the following class as per your requirement. Here, in the sample, the slider thumb has been customized to square, circle, oval shapes, and background image has also been customized.
.e-control.e-slider .e-handle {
background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
background-color: transparent;
height: 25px;
width: 25px;
}
#square_slider.e-control.e-slider .e-handle {
border-radius: 0%;
background-color: #f9920b;
border: 0;
}
#circle_slider.e-control.e-slider .e-handle {
border-radius: 50%;
background-color: #f9920b;
border: 0;
}
#oval_slider.e-control.e-slider .e-handle {
height: 25px;
width: 8px;
top: 3px;
border-radius: 15px;
background-color: #f9920b;
}// Initialize slider component
var squareSlider = new ej.inputs.Slider({
// Set the value for slider
value: 30,
min: 0, max: 100
});
squareSlider.appendTo('#square_slider');
// Initialize slider component
var circleSlider = new ej.inputs.Slider({
// Set the value for slider
value: 30,
// Set slider minimum and maximum values
min: 0, max: 100
});
circleSlider.appendTo('#circle_slider');
// Initialize slider component
var ovalSlider = new ej.inputs.Slider({
// Set the value for slider
value: 30,
// Set slider minimum and maximum values
min: 0, max: 100
});
ovalSlider.appendTo('#oval_slider');
// Initialize slider component
var imageSlider = new ej.inputs.Slider({
// Set the value for slider
value: 30,
// Set slider minimum and maximum values
min: 0, max: 100,
ticks: { placement: 'After' }
});
imageSlider.appendTo('#image_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="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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="labelText slider-userselect">Square</div>
<!-- Square slider element -->
<div id="square_slider"></div>
</div>
<div class="slider_container">
<div class="labelText slider-userselect">Circle</div>
<!-- Circle slider element -->
<div id="circle_slider"></div>
</div>
<div class="slider_container">
<div class="labelText slider-userselect">Oval</div>
<!-- Oval slider element -->
<div id="oval_slider"></div>
</div>
<div class="slider_container">
<div class="labelText slider-userselect">Custom image</div>
<!-- Image slider element -->
<div id="image_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: hidden;
}
#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 */
}
.labelText {
text-align: left;
font-weight: 500;
font-size: 13px;
padding-bottom: 10px;
}
.slider_container {
margin-top: 40px;
}
.e-bigger .content-wrapper {
width: 80%;
}
#square_slider .e-handle {
border-radius: 0;
background-color: #f9920b;
border: 0;
}
#circle_slider .e-handle {
background-color: #f9920b;
border-radius: 50%;
border: 0;
}
#image_slider .e-handle {
height: 25px;
width: 24px;
background-size: 24px;
}
#image_slider .e-handle {
background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
background-repeat: no-repeat;
background-color: transparent;
border: 0;
}
#square_slider .e-tab-handle::after,
#circle_slider .e-tab-handle::after {
background-color: #f9920b;
}
#image_slider .e-tab-handle::after {
background-color: transparent;
}
#oval_slider .e-handle {
height: 25px;
width: 8px;
top: 3px;
border-radius: 15px;
background-color: #f9920b;
}