- Default and MinRange Slider limits
- Range Slider limits
- Handle lock
Contact Support
Limits in Vue Range slider component
23 Dec 20249 minutes to read
The slider limits
restrict the slider thumb to a particular range. This is used when higher or lower values would negatively affect the process or product where the slider is being used.
The following are the six options in the slider’s limits object. Each API in the limits object is optional.
-
enabled
: Enables the limits in the Slider. -
minStart
: Sets the minimum limit for the first handle. -
minEnd
: Sets the maximum limit for the first handle. -
maxStart
: Sets the minimum limit for the second handle. -
maxEnd
: Sets the maximum limit for the second handle. -
startHandleFixed
: Locks the first handle. -
endHandleFixed
: Locks the second handle.
Default and MinRange Slider limits
There is only one handle in the Default and MinRange Slider, so minStart
, minEnd
](https://ej2.syncfusion.com/vue/documentation/api/slider/limitDataModel/#minend) and [
startHandleFixed
` options can be used. When the limits are enabled in the Slider, the limited area becomes darkened. So you can differentiate the allowed and restricted area. Refer to the following snippet to enable the limits in the Slider.
......
limits: { enabled: true, minStart: 10, minEnd: 40 }
......
<template>
<div id="app">
<ejs-slider id='default' :value='value' :limits='limits' :tooltip='tooltip' :type='type'></ejs-slider>
</div>
</template>
<script setup>
import { SliderComponent as EjsSlider } from "@syncfusion/ej2-vue-inputs";
const value = 30;
const tooltip = { isVisible: true };
const limits = { enabled: true, minStart: 10, minEnd: 40 };
const type = 'MinRange';
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";;
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
#app {
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
</style>
<template>
<div id="app">
<ejs-slider id='default' :value='value' :limits='limits' :tooltip='tooltip' :type='type'></ejs-slider>
</div>
</template>
<script>
import { SliderComponent } from "@syncfusion/ej2-vue-inputs";
export default {
name: "App",
components: {
"ejs-slider": SliderComponent
},
data() {
return {
value: 30,
tooltip: { isVisible: true },
limits: { enabled: true, minStart: 10, minEnd: 40 },
type: 'MinRange'
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
;
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
#app {
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
</style>
Range Slider limits
In the range slider, both handles can be restricted and locked using the limit’s object. In this sample, the first handle is limited between 10 and 40, and the second handle is limited between 60 and 90.
......
limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 }
......
<template>
<div id="app">
<ejs-slider id='default' :value='value' :limits='limits' :tooltip='tooltip' :type='type'></ejs-slider>
</div>
</template>
<script setup>
import { SliderComponent as EjsSlider } from "@syncfusion/ej2-vue-inputs";
const value = [30, 70];
const tooltip = { isVisible: true };
const limits = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };
const type = 'Range';
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
#app {
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
</style>
<template>
<div id="app">
<ejs-slider id='default' :value='value' :limits='limits' :tooltip='tooltip' :type='type'></ejs-slider>
</div>
</template>
<script>
import { SliderComponent } from "@syncfusion/ej2-vue-inputs";
export default {
name: "App",
components: {
"ejs-slider": SliderComponent
},
data() {
return {
value: [30, 70],
tooltip: { isVisible: true },
limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 },
type: 'Range'
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
#app {
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
</style>
Handle lock
The movement of slider handles can be locked. This is done by enabling the startHandleFixed
and endHandleFixed
properties in the limit’s object.
In this sample, the movement of both slider handles has been locked.
......
limits: { enabled: true, startHandleFixed: true, endHandleFixed: true }
......
<template>
<div id="app">
<ejs-slider id='default' :value='value' :limits='limits' :tooltip='tooltip' :type='type'></ejs-slider>
</div>
</template>
<script setup>
import { SliderComponent as EjsSlider } from "@syncfusion/ej2-vue-inputs";
const value = [30, 70];
const tooltip = { isVisible: true };
const limits = { enabled: true, startHandleFixed: true, endHandleFixed: true };
const type = 'Range';
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
#app {
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
</style>
<template>
<div id="app">
<ejs-slider id='default' :value='value' :limits='limits' :tooltip='tooltip' :type='type'></ejs-slider>
</div>
</template>
<script>
import { SliderComponent } from "@syncfusion/ej2-vue-inputs";
export default {
name: "App",
components: {
"ejs-slider": SliderComponent
},
data() {
return {
value: [30, 70],
tooltip: { isVisible: true },
limits: { enabled: true, startHandleFixed: true, endHandleFixed: true },
type: 'Range'
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
#app {
height: 40px;
left: 30%;
position: absolute;
top: 40%;
width: 50%;
}
</style>