Customize the thumb in EJ2 TypeScript Range Slider control

23 Jan 202512 minutes to read

The appearance of the Range Slider control can be customized through CSS. By overriding the slider CSS classes, you can customize the thumb. By default, the Range Slider has a unique class e-handle for the 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 the 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;
}
import { Slider } from '@syncfusion/ej2-inputs';

// Initialize Range Slider Control
let squareSlider: Slider = new Slider({
    // Set the value for slider
    value: 30,
    min: 0, max: 100
});
squareSlider.appendTo('#square_slider');

// Initialize Range Slider Control
let circleSlider: Slider = new Slider({
    // Set the value for slider
    value: 30,
    // Set slider minimum and maximum values
    min: 0, max: 100
});
circleSlider.appendTo('#circle_slider');

// Initialize Range Slider Control
let ovalSlider: Slider = new Slider({
    // Set the value for slider
    value: 30,
    // Set slider minimum and maximum values
    min: 0, max: 100
});
ovalSlider.appendTo('#oval_slider');

// Initialize Range Slider Control
let imageSlider: Slider = new 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 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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>

    <style>
        .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;
        }
    </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%;
}