Customize the bar in EJ2 TypeScript Range Slider control

10 Feb 202514 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 slider bar with different themes. By default, the slider has a class name e-slider-track for its bar. This class can be overridden with your own color values, as shown in 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.

import { Slider, SliderChangeEventArgs } from '@syncfusion/ej2-inputs';

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

// Initialize Range Slider Control
let gradientSlider: Slider = new Slider({
    // Set slider minimum and maximum values
    min: 0, max: 100,
    // Set the intial range values for slider
    value: 50,
    type: 'MinRange'
});
gradientSlider.appendTo('#gradient_slider');

let sliderTrack: HTMLElement;
let sliderHandle: HTMLElement;

// Initialize Range Slider Control
let dynamicColorSlider: Slider = new Slider({
    // Set slider minimum and maximum values
    min: 0, max: 100,
    value: 20,
    type: 'MinRange',
    // Handler used for slider created event
    created: () => {
        sliderTrack = (document.getElementById('dynamic_color_slider') as HTMLElement).querySelector('.e-range') as HTMLElement;
        sliderHandle = (document.getElementById('dynamic_color_slider') as HTMLElement).querySelector('.e-handle') as HTMLElement;
        (sliderHandle as HTMLElement).style.backgroundColor = 'green';
        (sliderTrack as HTMLElement).style.backgroundColor = 'green';
    },
    // Handler used for slider change event
    change: (args: SliderChangeEventArgs) => {
        if ((args.value as number) > 0 && (args.value as number) <= 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 as number) > 25 && (args.value as number) <= 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 as number) > 50 && (args.value as number) <= 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 as number) > 75 && (args.value as number) <= 100) {
            // Change handle and range bar color to red
            (sliderHandle as HTMLElement).style.backgroundColor = 'red';
            (sliderTrack as HTMLElement).style.backgroundColor = 'red';
        }
    }
});
dynamicColorSlider.appendTo('#dynamic_color_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/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.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>
<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="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>
    <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 */
        }

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