It illustrates the color track data in slider.
<template>
<div id="app">
<ejs-slider id="default" :value="value" :colorRange="colorRange"></ejs-slider>
</div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);
export default {
data() {
return {
value: 30,
colorRange: [{color:"#898b2b", start: 10, end: 20}]
};
}
}
</script>
<style>
#app {
color: #008cff;
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
</style> string
It is used to set the color in the slider bar.
Defaults to ”
number
It is used to get the end value for applying color.
Defaults to null
number
It is used to get the starting value for applying color.
Defaults to null