Color temperature slider

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

const temperature = ref(4500)

function getLabel(temp: number) {
  if (temp <= 3000) return "Warm"
  if (temp <= 4500) return "Neutral"
  if (temp <= 5500) return "Daylight"
  return "Cool"
}
</script>

<template>
  <div class="mx-auto grid w-full max-w-sm gap-4">
    <div class="flex items-center justify-between">
      <Label class="text-sm font-medium">Color Temperature</Label>
      <span class="text-muted-foreground text-xs font-medium tabular-nums">{{ `${temperature}K · ${getLabel(temperature)}` }}</span>
    </div>
    <div
      class="h-2 rounded-full"
      style="background: linear-gradient(to right, #ff8a2b, #ffd4a3, #fff5e6, #e8f0ff, #a3c9ff)"
    />
    <Slider :model-value="[temperature]" :min="2700" :max="6500" :step="100" />
  </div>
</template>