Slider with dynamic tooltip indicator

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

const value = ref(50)
const min = 0
const max = 100
const percentage = computed(() => ((value.value - min) / (max - min)) * 100)
</script>

<template>
  <div class="mx-auto grid w-full max-w-sm gap-4">
    <Label class="text-sm font-medium">Volume</Label>
    <div class="relative pt-7">
      <div
        class="bg-foreground text-background absolute top-0 rounded px-2 py-0.5 text-xs font-semibold tabular-nums"
        :style="{ left: `${percentage}%`, transform: 'translateX(-50%)' }"
      >
        {{ `${value}%` }}
        <div class="bg-foreground absolute -bottom-1 left-1/2 size-2 -translate-x-1/2 rotate-45" />
      </div>
      <Slider :model-value="[value]" :min="min" :max="max" :step="1" />
    </div>
  </div>
</template>