Vue
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

LimitData API in Vue Slider API component

It illustrates the limit data in slider.

<template>
    <div id="app">
    <ejs-slider id="default" :value="value" :limits="limits" :tooltip="tooltip" :type="type"></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, 70],
        tooltip: { isVisible: true },
        limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 },
        type: "Range"
    };
  }
}
</script>
<style>

   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>

Properties

enabled

boolean

It is used to enable the limit in the slider.

Defaults to false

endHandleFixed

boolean

It is used to lock the second handle.

<template>
    <div id="app">
    <ejs-slider id="default" :value="value" :limits="limits" :tooltip="tooltip" :type="type"></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, 70],
        tooltip: { isVisible: true },
        limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90, endHandleFixed: true },
        type: "Range"
    };
  }
}
</script>
<style>

   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>

Defaults to false

maxEnd

number

It is used to set the maximum end limit value.

Defaults to null

maxStart

number

It is used to set the maximum start limit value.

Defaults to null

minEnd

number

It is used to set the minimum end limit value.

Defaults to null

minStart

number

It is used to set the minimum start limit value.

Defaults to null

startHandleFixed

boolean

It is used to lock the first handle.

<template>
    <div id="app">
    <ejs-slider id="default" :value="value" :limits="limits" :tooltip="tooltip" :type="type"></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, 70],
        tooltip: { isVisible: true },
        limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90, startHandleFixed: true },
        type: "Range"
    };
  }
}
</script>
<style>

   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>

Defaults to false

Previous
Next