Slider

"use client";
import { useEffect, useState } from "react";

type State = "min" | "mid" | "max";

export function Slider({ state = "mid" }: { state?: State }) {
const pct = state === "min" ? 8 : state === "max" ? 92 : 50;
const [v, setV] = useState(pct);
useEffect(() => setV(pct), [pct]);

return (
  <div className="w-full max-w-md">
    <div className="mb-3 flex items-center justify-between">
      <span className="font-mono text-[11px] text-muted-foreground">音量</span>
      <span className="font-mono text-xs text-foreground">{v}</span>
    </div>
    <div className="relative h-6">
      <div className="absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-muted" />
      <div
        className="absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-lab-accent"
        style={{ width: `${v}%` }}
      />
      <input
        type="range"
        min={0}
        max={100}
        value={v}
        onChange={(e) => setV(Number(e.target.value))}
        className="absolute inset-0 h-full w-full cursor-pointer appearance-none bg-transparent
          [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4
          [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full
          [&::-webkit-slider-thumb]:bg-foreground [&::-webkit-slider-thumb]:shadow"
      />
    </div>
    <div className="mt-2 flex justify-between font-mono text-[10px] text-muted-foreground">
      <span>0</span>
      <span>100</span>
    </div>
  </div>
);
}