Customize the ticks in EJ2 TypeScript 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;
}import { Slider, SliderTickRenderedEventArgs, SliderTickEventArgs } from '@syncfusion/ej2-inputs';
// Initialize Range Slider Control
let ticksSlider: Slider = new 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: (args: SliderTickEventArgs) => {
if (args.tickElement.classList.contains('e-large')) {
args.tickElement.classList.add('e-custom');
}
}
});
ticksSlider.appendTo('#ticks_slider');
// Initialize Range Slider Control
let customTicks: Slider = new 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: (args: SliderTickRenderedEventArgs) => {
let li: any = args.ticksWrapper.getElementsByClassName('e-large');
let remarks: any = ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good', 'Excellent'];
for (let i: number = 0; i < li.length; ++i) {
(li[i].querySelectorAll('.e-tick-both')[1] as HTMLElement).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/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" 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>
<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%;
}