Slider with reference labels

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

<template>
  <div class="mx-auto grid w-full max-w-sm gap-4">
    <Label class="text-sm font-medium">Storage</Label>
    <Slider :default-value="[15]" :max="35" :min="5" />
    <span aria-hidden="true" class="text-muted-foreground flex w-full items-center justify-between text-xs font-medium">
      <span>5 GB</span>
      <span>20 GB</span>
      <span>35 GB</span>
    </span>
  </div>
</template>