slider.vue
1.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
<div style="margin: 0 400px;">
<Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>
<Button @click="randomSingle">change</Button> {{singleDisplayValue}}
<Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>
<Button @click="randomRange">change</Button> {{rangeDisplayValue}}
</div>
</template>
<script>
export default {
data () {
return {
valueSingle: 10,
valueRange: [20, 50],
singleDisplayValue: 10,
rangeDisplayValue: [20, 50]
};
},
methods: {
updateSingleDisplayValue (val){
console.log('updateSingleDisplayValue', val);
this.singleDisplayValue = val;
},
updateRangeDisplayValue (val){
console.log('updateRangeDisplayValue', val);
this.rangeDisplayValue = val.join(' - ');
},
randomSingle () {
this.valueSingle = this.random(0, 100);
},
randomRange () {
this.valueRange = [this.random(0, 50), this.random(50, 100)];
},
random (min, max){
return Math.round(Math.random() * (max - min)) + min;
}
}
};
</script>