Project 21: Music Player UI
Vue Engineer
Component Task
Objective
Review day: combine watchers and methods — days 5 and 12 — to react to a volume change.
You're building a music player's volume control.
Task: create a volume ref, a setVolume method updating it from a range input, and a watcher logging every change.
Component.vue
<script setup>
import { ref, watch } from 'vue';
const volume = ref(50);
function setVolume(value) {
volume.value = value;
}
watch(volume, (v) => {
console.log('Volume set to', v);
});
</script>
<template>
<input type="range" :value="volume" @input="setVolume($event.target.value)">
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result