38 lines
887 B
TypeScript
38 lines
887 B
TypeScript
/** 阅读器主题内的滑条配置项:说明 + 整数档位滑条 + 锚点刻度. */
|
|
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>
|
|
);
|
|
}
|