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>