owntone-server/web-src/src/components/ControlSlider.vue
Alain Nussbaumer 583b676489 [web] Create a slider component
As a component, the slider is easier to maintain.
2023-07-07 13:26:19 +02:00

30 lines
530 B
Vue

<template>
<input
:value="value"
:disabled="disabled"
class="slider"
:class="{ 'is-inactive': disabled }"
:max="max"
type="range"
:style="{
'--ratio': ratio,
'--cursor': $filters.cursor(cursor)
}"
@input="$emit('update:value', $event.target.value)"
/>
</template>
<script>
export default {
name: 'ControlSlider',
props: ['value', 'max', 'disabled', 'cursor'],
emits: ['update:value'],
computed: {
ratio() {
return this.value / this.max
}
}
}
</script>