refactor(web): extract prefetch slider into reusable RdSlider component

2026-09-08 21:31:20 +08:00
parent 472e58bec9
commit 3178c2802f
2 changed files with 46 additions and 19 deletions
@@ -0,0 +1,37 @@
+/** 阅读器主题内的滑条配置项:说明 + 整数档位滑条 + 锚点刻度. */
+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>
+  );
+}