36 lines
645 B
Vue
36 lines
645 B
Vue
<template>
|
|
<div>
|
|
<Thumbwheel
|
|
v-model="model"
|
|
:label="label || 'Duration'"
|
|
:lock-key="lockKey || 'duration'"
|
|
:min="MIN"
|
|
:max="MAX"
|
|
:step="0.1"
|
|
:fine-step="0.1"
|
|
:coarse-step="1"
|
|
:drag-range="29"
|
|
editable
|
|
unit="s"
|
|
/>
|
|
<p v-if="hint" class="mt-1 text-[11px] text-zinc-500">{{ hint }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const MIN = 0.5
|
|
const MAX = 120
|
|
|
|
withDefaults(defineProps<{
|
|
label?: string
|
|
hint?: string
|
|
lockKey?: string
|
|
}>(), {
|
|
label: '',
|
|
hint: '',
|
|
lockKey: 'duration'
|
|
})
|
|
|
|
const model = defineModel<number>({ required: true })
|
|
</script>
|