merge interface with main script

interface/components/Slider.tsx

@@ -0,0 +1,27 @@
+import { useSettingsContext } from "../SettingsContext";
+import "./Slider.css";
+
+interface SliderProps {
+  state: number;
+  onChange: (value: number) => void;
+}
+
+const Slider: React.FC<SliderProps> = ({ state, onChange }) => {
+  const { settingsState } = useSettingsContext();
+
+  return (
+    <div className="relative w-full max-w-lg py-8 mx-auto">
+      <input
+        type="range"
+        min="0"
+        max="100"
+        value={state}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="w-full h-1 rounded-full appearance-none cursor-pointer slider"
+        style={{ background: `${settingsState.customThemeColor}` }}
+      />
+    </div>
+  );
+};
+
+export default Slider;