Customize slider ticks label in Vue Range slider component
16 Mar 20238 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.
.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;
}
<template>
<div id="app">
<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 -->
<ejs-slider
id="ticks_slider"
min="0"
max="100"
value="30"
step="5"
type="MinRange"
:ticks="ticks"
v-on:renderingTicks="onRenderingTicks"
></ejs-slider>
</div>
<div class="slider_container">
<div class="slider_labelText userselect">Ticks with legends</div>
<!-- Ticks slider element -->
<ejs-slider
id="slider"
min="0"
max="100"
value="30"
type="MinRange"
:ticks="rangeTicks"
v-on:renderedTicks="onRangeTicks"
></ejs-slider>
</div>
</div>
</div>
</div>
</div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
#app {
height: 40px;
position: absolute;
width: 98%;
}
.slider-content-wrapper {
width: 40%;
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;
}
#ticks_slider .e-scale .e-tick {
background-image: none;
visibility: visible;
font-family: "e-customized-icons";
}
@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;
}
#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% + 1px);
left: calc(50% - 5px);
}
#slider_wrapper #ticks_slider .e-scale :nth-child(1)::before {
top: calc(50% + 1px);
left: calc(0% - 5px);
}
#slider_wrapper #ticks_slider .e-scale :nth-child(6)::before {
top: calc(50% + 1px);
left: calc(100% - 6px);
}
</style>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);
import { enableRipple } from "@syncfusion/ej2-base";
enableRipple(true);
export default {
data: function() {
return {
ticks: { placement: "Before", largeStep: 20 },
rangeTicks: { placement: "Both", largeStep: 20, smallStep: 5 }
};
},
methods: {
onRenderingTicks(args) {
if (args.tickElement.classList.contains("e-large")) {
args.tickElement.classList.add("e-custom");
}
},
onRangeTicks(args) {
let li = args.ticksWrapper.getElementsByClassName("e-large");
let remarks = [
"Very Poor",
"Poor",
"Average",
"Good",
"Very Good",
"Excellent"
];
for (let i = 0; i < li.length; ++i) {
li[i].querySelectorAll(".e-tick-both")[1].innerText = remarks[i];
}
}
}
};
</script>