<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="icon-volume-medium"></i>
</a>
<div class="dropdown-menu dropdown-content">
<ul class="media-list dropdown-content-body width-350">
<li class="media">
<div class="media-body">
<vue-slider
:real-time="true"
ref="slider1"
v-bind="player"
v-model="player.value">
</vue-slider>
</div>
</li>
<li class="media">
<div class="media-body">
<vue-slider
:real-time="true"
:refresh="this"
ref="slider"
v-bind="volume"
v-model="volume.value">
</vue-slider>
</div>
</li>
</ul>
</div>
</li>
return {
volume:{
value: 50,
width: 100,
height: 8,
dotSize: 20,
min: 1,
max: 100,
interval: 0.5,
disabled: false,
show: true,
speed: 0.3,
reverse: false,
lazy: true,
tooltip: false,
piecewise: false,
},
player: {
value: 1,
width: "100%",
height: 8,
dotSize: 20,
min: 1,
max: 100,
interval: 0.5,
disabled: false,
show: true,
speed: 0.3,
reverse: false,
lazy: true,
tooltip: false,
piecewise: false,
}
}
mounted(){
this.$refs.slider.refresh;
}