Slider with tick marks

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

const max = 12
const skipInterval = 2
const ticks = Array.from({ length: max + 1 }, (_, i) => i)
</script>

<template>
  <div class="mx-auto grid w-full max-w-sm gap-4">
    <Label class="text-sm font-medium">Duration (months)</Label>
    <Slider :default-value="[5]" :max="max" />
    <span aria-hidden="true" class="text-muted-foreground flex w-full items-center justify-between gap-1 px-2.5 text-xs font-medium">
      <span v-for="tick in ticks" :key="tick" class="flex w-0 flex-col items-center justify-center gap-2">
        <span :class="cn('bg-muted-foreground/70 h-1 w-px', tick % skipInterval !== 0 && 'h-0.5')" />
        <span :class="tick % skipInterval !== 0 && 'opacity-0'">{{ tick }}</span>
      </span>
    </span>
  </div>
</template>