Two way binding in Vue Range slider component
16 Mar 20231 minute to read
It can be achieved by using the v-model
directive in vue. In the following sample, when you change a value in one slider will automatically change the value in the other slider. It updates the other slider using value
property.
<template>
<div id="app">
<div>Default Slider</div>
<ejs-slider id='default' v-model='value'></ejs-slider>
<div>Min Range Slider</div>
<ejs-slider id='minRange' type='MinRange' v-model='value'></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,
};
}
}
</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>