Improve the frontend 3

frontend/src/components/ui/Slider/Slider.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export interface SliderProps {
+  min: number;
+  max: number;
+  step?: number;
+ value: number[];
+  onValueChange: (value: number[]) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+const Slider: React.FC<SliderProps> = ({
+  min,
+  max,
+  step = 1,
+  value,
+  onValueChange,
+  disabled = false,
+  className = '',
+}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(e.target.value);
+    onValueChange([newValue]);
+  };
+
+  return (
+    <div className={`flex items-center space-x-4 ${className}`}>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value[0]}
+        onChange={handleChange}
+        disabled={disabled}
+        className="w-full h-2 bg-[var(--bg-secondary)] rounded-lg appearance-none cursor-pointer accent-[var(--color-primary)] disabled:opacity-50 disabled:cursor-not-allowed"
+      />
+      <span className="text-sm text-[var(--text-secondary)] min-w-12">
+        {(value[0] * 100).toFixed(0)}%
+      </span>
+    </div>
+  );
+};
+
+export default Slider;

frontend/src/components/ui/Slider/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Slider';
+export { default as Slider } from './Slider';
+export type { SliderProps } from './Slider';