Search results

Customize the Ticks in JavaScript (ES5) Slider control

06 Oct 2021 / 2 minutes to read

Slider view can be customized via CSS. By overriding the slider CSS classes, you can customize the ticks. The ticks in slider allows you to easily identify the current value/values of the slider. It contains smallStep and largeStep. By default, slider has class e-tick for slider ticks. You can override the class as per your requirement. Refer to the following code snippet to render ticks.

Copied to clipboard
.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.

Copied to clipboard
#ticks_slider .e-scale :nth-child(1)::before {
    color: red;
}
Source
Preview
index.js
Copied to clipboard
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 slider component
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');