"use client" import { useState } from "react" // shadcn import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" // ------------------------------ | SLIDER - COLOR OPTIONS | ------------------------------ // export function SliderColorOptions() { const [values, setValues] = useState({ green: 80, amber: 40, error: 75, }) const getValue = (val: number | readonly number[]) => Array.isArray(val) ? val[0] : val return (

{/* Green */}

Green {values.green}%

setValues((prev) => ({ ...prev, green: getValue(val), })) } max={100} step={1} className="[&_[data-slot=slider-range]]:bg-green-500 [&_[data-slot=slider-thumb]]:border-green-500 [&_[data-slot=slider-thumb]]:ring-green-500/30" />

{/* Amber */}

Amber {values.amber}%

setValues((prev) => ({ ...prev, amber: getValue(val), })) } max={100} step={1} className="[&_[data-slot=slider-range]]:bg-amber-500 [&_[data-slot=slider-thumb]]:border-amber-500 [&_[data-slot=slider-thumb]]:ring-amber-500/30" />

{/* Error */}

Error {values.error}%

setValues((prev) => ({ ...prev, error: getValue(val), })) } max={100} step={1} className="[&_[data-slot=slider-range]]:bg-red-500 [&_[data-slot=slider-thumb]]:border-red-500 [&_[data-slot=slider-thumb]]:ring-red-500/30" />

) }