/** 阅读器主题内的滑条配置项:说明 + 整数档位滑条 + 锚点刻度. */
export function RdSlider({
  label,
  ariaLabel,
  min,
  max,
  value,
  onChange,
}: {
  label: string;
  ariaLabel: string;
  min: number;
  max: number;
  value: number;
  onChange: (v: number) => void;
}) {
  return (
    <div className="px-2.5 pb-1.5 pt-2">
      <div className="mb-1 text-sm">{label}</div>
      <input
        type="range"
        min={min}
        max={max}
        step={1}
        value={value}
        aria-label={ariaLabel}
        className="rd-range"
        onChange={(e) => onChange(Number(e.target.value))}
      />
      <div className="flex justify-between px-1 text-[10px] tabular-nums opacity-50" aria-hidden="true">
        {Array.from({ length: max - min + 1 }, (_, i) => (
          <span key={i}>{min + i}</span>
        ))}
      </div>
    </div>
  );
}