refactor: replace input controls with SliderControl for max concurrent requests, reader prefetch count, and circuit breaker settings in AdvancedSettings and BackgroundSettings components

src/components/ui/slider-control.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { Minus, Plus } from "lucide-react";
+
+interface SliderControlProps {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+  description?: string;
+  onChange: (value: number) => void;
+  formatValue?: (value: number) => string;
+}
+
+export function SliderControl({
+  label,
+  value,
+  min,
+  max,
+  step = 1,
+  unit = "",
+  description,
+  onChange,
+  formatValue,
+}: SliderControlProps) {
+  const adjust = (delta: number) => {
+    const newValue = Math.max(min, Math.min(max, value + delta));
+    onChange(newValue);
+  };
+
+  const displayValue = formatValue ? formatValue(value) : `${value}${unit}`;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <Label>{label}</Label>
+        <span className="text-sm text-muted-foreground">{displayValue}</span>
+      </div>
+      <div className="flex items-center gap-3">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => adjust(-step)}
+          className="h-10 w-10 p-0 shrink-0"
+          disabled={value <= min}
+        >
+          <Minus className="h-4 w-4" />
+        </Button>
+        <Slider
+          value={[value]}
+          onValueChange={(values) => onChange(values[0])}
+          min={min}
+          max={max}
+          step={step}
+          className="flex-1"
+        />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => adjust(step)}
+          className="h-10 w-10 p-0 shrink-0"
+          disabled={value >= max}
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+      {description && (
+        <p className="text-xs text-muted-foreground">{description}</p>
+      )}
+    </div>
+  );
+}
+