Configures the ticks data of the Slider.
string
It is used to customize the Slider scale value to the desired format using Internationalization or events(custom formatting).
<template>
<div id="app">
<ejs-slider id="default" :value="value" :ticks="ticks"></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,
ticks: { placement: "After", format: "C2", largeStep: 20, smallStep: 10, showSmallTicks: true }
};
}
}
</script>
<style>
#app {
color: #008cff;
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
.slidernew {
border: 1px solid;
}
</style>
number
It is used to denote the distance between two major (large) ticks from the scale of the Slider.
<template>
<div id="app">
<ejs-slider id="default" :value="value" :ticks="ticks"></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,
ticks: { placement: "After", largeStep: 20 }
};
}
}
</script>
<style>
#app {
color: #008cff;
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
.slidernew {
border: 1px solid;
}
</style>
Defaults to 10
It is used to denote the position of the ticks in the Slider. The available options are:
<template>
<div id="app">
<ejs-slider id="default" :value="value" :ticks="ticks"></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,
ticks: { placement: "Before", largeStep: 20 }
};
}
}
</script>
<style>
#app {
color: #008cff;
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
.slidernew {
border: 1px solid;
}
</style>
Defaults to ‘None’
boolean
We can show or hide the small ticks in the Slider, which will be appeared in between the largeTicks.
Defaults to false
number
It is used to denote the distance between two minor (small) ticks from the scale of the Slider.
<template>
<div id="app">
<ejs-slider id="default" :value="value" :ticks="ticks"></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,
ticks: { placement: "After", smallStep: 10 }
};
}
}
</script>
<style>
#app {
color: #008cff;
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
.slidernew {
border: 1px solid;
}
</style>
Defaults to 1