Search results

TicksData API in Vue Slider API component

Configures the ticks data of the Slider.

Properties

format

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>

largeStep

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

placement

Placement

It is used to denote the position of the ticks in the Slider. The available options are:

  • before - Ticks are placed in the top of the horizontal slider bar or at the left of the vertical slider bar.
  • after - Ticks are placed in the bottom of the horizontal slider bar or at the right of the vertical slider bar.
  • both - Ticks are placed on the both side of the Slider bar.
  • none - Ticks are not shown.
<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’

showSmallTicks

boolean

We can show or hide the small ticks in the Slider, which will be appeared in between the largeTicks.

Defaults to false

smallStep

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