Customize the ticks in EJ2 JavaScript Range Slider control

23 Jan 202514 minutes to read

The appearance of the Range Slider control can be customized via CSS. By overriding the slider CSS classes, you can customize the ticks, which allow you to easily identify the current value/values of the slider. It contains smallStep and largeStep properties. By default, the slider has a class named e-tick for slider ticks, which can be overridden as per your requirements. Refer to the following code snippet to render custom ticks:

.e-scale .e-tick.e-custom::before {
    content: '\e967';
    position: absolute;
}

Here, the color for rendered ticks has been applied through nth-child(child_number). The color is applied to the value of the child_number in the slider.

#ticks_slider .e-scale :nth-child(1)::before {
    color: red;
}

index.js
index.html
index.css
var ticksSlider = new ej.inputs.Slider({
    // Set slider minimum and maximum values
    min: 0, max: 100,
    // Set the initial value for slider
    value: 30,
    // Set the step value for slider
    step: 5,
    // Set the type to render minRange slider
    type: 'MinRange',
    // Initialize ticks with placement, largeStep
    ticks: { placement: 'Before', largeStep: 20 },
    // Handler used to add custom class to all tick element
    renderingTicks: function (args) {
        if (args.tickElement.classList.contains('e-large')) {
            args.tickElement.classList.add('e-custom');
        }
    }
});
ticksSlider.appendTo('#ticks_slider');
// Initialize Range Slider Control
var customTicks = new ej.inputs.Slider({
    // Set slider minimum and maximum values
    min: 0, max: 100,
    // Set the initial value for slider
    value: 30,
    // Set the type to render minRange slider
    type: 'MinRange',
    // Initialize ticks with placement, largeStep, smallStep
    ticks: { placement: 'Both', largeStep: 20, smallStep: 5 },
    // Handler used to customize tick element
    renderedTicks: function (args) {
        var li = args.ticksWrapper.getElementsByClassName('e-large');
        var remarks = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];
        for (var i = 0; i < li.length; ++i) {
            li[i].querySelectorAll('.e-tick-both')[1].innerText = remarks[i];
        }
    }
});
customTicks.appendTo('#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/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/30.1.37/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" id="slider_wrapper">
                    <div class="slider_labelText userselect">Dynamic ticks color</div>
                    <!-- Ticks slider element -->
                    <div id="ticks_slider"></div>
                </div>
                <div class="slider_container">
                    <div class="slider_labelText userselect">Ticks with legends</div>
                    <!-- Ticks slider element -->
                    <div id="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>
    <style>
        .slider-content-wrapper {
            width: 50%;
            margin: 0 auto;
            min-width: 185px;
        }

        .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: 40px;
        }

        .slider_container {
            margin-top: 40px;
        }

        .e-bigger .slider-content-wrapper {
            width: 80%;
        }

        #ticks_slider .e-range {
            z-index: unset;
        }

        /* csslint ignore:start */
        @font-face {
            font-family: 'e-customized-icons';
            src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        /* csslint ignore:end */
        #ticks_slider .e-scale .e-tick {
            background-image: none;
            visibility: visible;
            font-family: 'e-customized-icons';
        }

        #ticks_slider .e-scale {
            z-index: 0;
        }

        #ticks_slider .e-scale .e-custom::before {
            content: '\e967';
            position: absolute;
        }

        #ticks_slider .e-scale :nth-child(1)::before {
            color: red;
        }

        #ticks_slider .e-scale :nth-child(2)::before {
            color: blue;
        }

        #ticks_slider .e-scale :nth-child(3)::before {
            color: green;
        }

        #ticks_slider .e-scale :nth-child(4)::before {
            color: blueviolet;
        }

        #ticks_slider .e-scale :nth-child(5)::before {
            color: orange;
        }

        #ticks_slider .e-scale :nth-child(6)::before {
            color: pink;
        }

        #ticks_slider .e-scale .e-custom::before {
            font-size: 10px;
        }

        #ticks_slider .e-scale .e-custom::before {
            top: calc(50% + -3px);
            left: calc(50% - 5px);
        }

        #slider_wrapper #ticks_slider .e-scale :nth-child(1)::before {
            top: calc(50% + -3px);
            left: calc(0% - 5px);
        }

        #slider_wrapper #ticks_slider .e-scale :nth-child(6)::before {
            top: calc(50% + -3px);
            left: calc(100% - 6px);
        }
    </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%;
}