Slider with controlled value tracking

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

const value = ref([0.3, 0.7])
</script>

<template>
  <div class="mx-auto grid w-full max-w-sm gap-4">
    <div class="flex items-center justify-between gap-2">
      <Label for="slider-controlled" class="text-sm font-medium">Controlled Range</Label>
      <span class="text-secondary-foreground text-xs font-semibold">{{ value[0]?.toFixed(1) }} – {{ value[1]?.toFixed(1) }}</span>
    </div>
    <Slider id="slider-controlled" v-model="value" :min="0" :max="1" :step="0.1" />
  </div>
</template>