DemoSliderAppendAndPrepend.vue
2.1 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<script lang="ts" setup>
const bpm = ref(40)
const min = 40
const max = 218
const isPlaying = ref(false)
const color = computed(() => {
if (bpm.value < 100)
return 'primary'
if (bpm.value < 125)
return 'success'
if (bpm.value < 140)
return 'info'
if (bpm.value < 175)
return 'warning'
return 'error'
})
const animationDuration = computed(() => {
return `${60 / bpm.value}s`
})
const decrement = () => {
if (bpm.value > min)
bpm.value -= 1
}
const increment = () => {
if (bpm.value < max)
bpm.value += 1
}
</script>
<template>
<div class="d-flex justify-space-between ma-4">
<div>
<span
class="text-6xl font-weight-light"
v-text="bpm"
/>
<span class="subheading font-weight-light me-1">BPM</span>
<VFadeTransition>
<VAvatar
v-if="isPlaying"
:color="color"
:style="{
animationDuration,
}"
class="mb-1 v-avatar--metronome"
size="12"
/>
</VFadeTransition>
</div>
<div>
<VBtn
:color="color"
icon
elevation="0"
@click="isPlaying = !isPlaying"
>
<VIcon
size="large"
:icon="isPlaying ? 'ri-pause-line' : 'ri-play-line'"
/>
</VBtn>
</div>
</div>
<VSlider
v-model="bpm"
:color="color"
:step="1"
:min="min"
:max="max"
track-color="secondary"
>
<template #prepend>
<VBtn
size="small"
variant="text"
icon="ri-subtract-line"
:color="color"
@click="decrement"
/>
</template>
<template #append>
<VBtn
size="small"
variant="text"
icon="ri-add-line"
:color="color"
@click="increment"
/>
</template>
</VSlider>
</template>
<style lang="scss" scoped>
@keyframes metronome-example {
from {
transform: scale(0.5);
}
to {
transform: scale(1);
}
}
.v-avatar--metronome {
animation-direction: alternate;
animation-iteration-count: infinite;
animation-name: metronome-example;
}
</style>