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

LimitDataModel API in Vue Slider API component

Interface for a class LimitData

Properties

enabled

boolean

It is used to enable the limit in the slider.

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>

maxEnd

number

It is used to set the maximum end limit value.

maxStart

number

It is used to set the maximum start limit value.

minEnd

number

It is used to set the minimum end limit value.

minStart

number

It is used to set the minimum start limit value.

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>
Previous
Next