Range input with value indicator

<!--
  Расхождение с апстримом: `value` зафиксирован в начальном состоянии
  оригинала (`useState(50)`) — значения полей задаются фиксированными
  пропсами, чтобы статика совпадала без взаимодействия.
-->
<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

const value = 50
</script>

<template>
  <Field class="w-full max-w-xs">
    <div class="flex items-center justify-between">
      <FieldLabel for="range-slider">Volume</FieldLabel>
      <span class="text-muted-foreground text-xs font-medium">{{ value }}</span>
    </div>
    <Input
      id="range-slider"
      type="range"
      min="0"
      max="100"
      :value="value"
      class="bg-muted accent-primary h-2 cursor-pointer appearance-none"
    />
  </Field>
</template>