i would like to add a slider to my panel. I've insalled
npm install vue-slider-component --save
and then i created a new component and regstried in app.js
In my Slider.vue component i added the startet template
<template>
<div>
<vue-slider ref="slider" v-bind="options" v-model="value"></vue-slider>
<h3><small>Value: </small>{{ options.value }}</h3>
</div>
</template>
and imported the vueSlider
<script>
import vueSlider from 'vue-slider-component'
export default {
components: {
vueSlider
},
data() {
return {
options: {
value: 5,
width: 'auto',
height: 6,
direction: 'horizontal',
dotSize: 16,
eventType: 'auto',
min: 5,
max: 100,
interval: 5,
show: true,
}
}
},
}
</script>
I'm getting the the slider. Unfortunately i can't slide it and get immediately the maxValue on the start. Like in this picture
and thats it. It doesn't matter where i click it does nothing. When i would like to change the options like change the dotSize it also does nothing.
I noticed that when i open the console(F12) it's working perfectly.
The slider is wrped in a bootstrap 3 panel.
What do i'm missing ?
UPDATE 1:
i pulled the value outside the options now i get this: