Slider synced with number input

<script setup lang="ts">
import { ref } from "vue"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"

const value = ref(50)
</script>

<template>
  <div class="mx-auto grid w-full max-w-sm gap-4">
    <div class="flex items-center justify-between">
      <Label for="slider-input" class="text-sm font-medium">Opacity</Label>
      <div class="flex items-center gap-1.5">
        <Input id="slider-input" type="number" :value="value" :min="0" :max="100" class="h-8 w-16 text-center text-sm tabular-nums" />
        <span class="text-muted-foreground text-xs">%</span>
      </div>
    </div>
    <Slider :model-value="[value]" :max="100" :step="1" />
  </div>
</template>