<script setup lang="ts">
import { computed } from 'vue'

type Props = {
  label?: string
  min?: number
  max?: number
  step?: number
  width?: string | number
  disabled?: boolean
  readonlyValue?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  label: '',
  min: 0,
  max: 100,
  step: 1,
  width: 70,
  disabled: false,
  readonlyValue: true,
})

const model = defineModel<number>({ required: true })

const inputWidth = computed(() =>
  typeof props.width === 'number' ? `${props.width}px` : props.width
)
</script>

<template>
  <v-slider
    v-model="model"
    :min="min"
    :max="max"
    :step="step"
    ticks="always"
    :tick-labels="true"
    thumb-label
    :label="label"
    :disabled="disabled"
  >
    <template #append>
      <v-text-field
        :model-value="model"
        density="compact"
        variant="outlined"
        hide-details
        :readonly="readonlyValue"
        :disabled="disabled"
        :style="{ width: inputWidth }"
      />
    </template>
  </v-slider>
</template>