add slider

interface/src/components/Slider.css

@@ -1,21 +1,19 @@
-.range-slider{
-	margin: 20px;
-	appearance: none;
-	outline: none;
-	width: 150px;
-	height: 3px;
-	border-radius: 5px;
-	background-color: #ccc;
+/* Slider Thumb */
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 24px;
+  height: 24px;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+  background: white;
+  cursor: pointer;
+  border-radius: 50%;
 }
 
-.range-slide::-webkit-slider-runnable-track{
-	background-color: #4BD663 !important;
-}
-.range-slider::-webkit-slider-thumb {
-  background: #fafafa;
-  appearance: none;
-  box-shadow: 1px 2px 26px 1px #bdbdbd;
-  width: 15px;
-  height: 15px;
+.slider::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+  background: white;
+  cursor: pointer;
   border-radius: 50%;
 }

interface/src/components/Slider.tsx

@@ -1,29 +1,24 @@
-import React, { useState } from 'react';
+import { useSettingsContext } from "../SettingsContext";
 import "./Slider.css";
-import type { Slider } from '../types/SliderProps';
 
-const Slider: React.FC<Slider> = ({ onValueChange }) => {
-  const [sliderValue, setSliderValue] = useState(0);
+interface SliderProps {
+  state: number;
+  onChange: (value: number) => void;
+}
 
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value, 10);
-    setSliderValue(value);
-  };
-
-  const handleMouseUp = () => {
-    onValueChange(sliderValue);
-  };
+const Slider: React.FC<SliderProps> = ({ state, onChange }) => {
+  const { settingsState } = useSettingsContext();
 
   return (
-    <div className="relative">
+    <div className="relative w-full max-w-lg py-8 mx-auto">
       <input
         type="range"
         min="0"
         max="100"
-        value={sliderValue}
-        onChange={handleInputChange}
-        onMouseUp={handleMouseUp}
-        className="absolute w-full h-1 rounded-full cursor-pointer range-slider focus:outline-none"
+        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>
   );

interface/src/pages/Settings.tsx

@@ -1,5 +1,7 @@
-import Switch from '../components/Switch';
 import ColorPicker from '../components/ColorPicker';
+import Switch from '../components/Switch';
+import Slider from '../components/Slider';
+
 import { SettingsList } from '../types/SettingsProps';
 import { useSettingsContext } from '../SettingsContext';
 
@@ -13,6 +15,13 @@ const Settings: React.FC = () => {
     });
   };
 
+  const sliderChange = (key: string, value: number) => {
+    setSettingsState({
+      ...settingsState,
+      [key]: value,
+    });
+  }
+
   const colorChange = (color: string) => {
     setSettingsState({
       ...settingsState,
@@ -39,7 +48,7 @@ const Settings: React.FC = () => {
     {
       title: "Animated Background Speed",
       description: "Controls the speed of the animated background.",
-      modifyElement: <div>Insert Slider Please</div>
+      modifyElement: <Slider state={parseInt(settingsState.animatedBackgroundSpeed)} onChange={(value: number) => sliderChange('animatedBackgroundSpeed', value)} />
     },
     {
       title: "Custom Theme Colour",