add slider

2026-06-06 03:34:40 +00:00 · 2023-09-25 14:58:08 +10:00
parent 3745653c0d
commit d0d7fd1b11
9 changed files with 39 additions and 137 deletions
@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="/client/public/client.js"></script>
-    <link rel="stylesheet" href="/client/rsc/css/index.css">
-  </head>
-  <body class="">
-    <div id="ExtensionPopup"></div>
-    
-  </body>
-</html>
@@ -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%;
 }
@@ -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>
  );
@@ -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",