mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-05 19:24:39 +00:00
add slider
This commit is contained in:
SethBurkart123
@@ -6,5 +6,6 @@ bun.lockb
|
|||||||
# Build
|
# Build
|
||||||
package.zip
|
package.zip
|
||||||
build/
|
build/
|
||||||
|
dist/
|
||||||
|
|
||||||
**/.DS_Store
|
**/.DS_Store
|
||||||
-85
File diff suppressed because one or more lines are too long
-1
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Vendored
-15
@@ -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{
|
/* Slider Thumb */
|
||||||
margin: 20px;
|
.slider::-webkit-slider-thumb {
|
||||||
appearance: none;
|
-webkit-appearance: none;
|
||||||
outline: none;
|
width: 24px;
|
||||||
width: 150px;
|
height: 24px;
|
||||||
height: 3px;
|
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 5px;
|
background: white;
|
||||||
background-color: #ccc;
|
cursor: pointer;
|
||||||
}
|
border-radius: 50%;
|
||||||
|
}
|
||||||
.range-slide::-webkit-slider-runnable-track{
|
|
||||||
background-color: #4BD663 !important;
|
.slider::-moz-range-thumb {
|
||||||
}
|
width: 24px;
|
||||||
.range-slider::-webkit-slider-thumb {
|
height: 24px;
|
||||||
background: #fafafa;
|
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||||
appearance: none;
|
background: white;
|
||||||
box-shadow: 1px 2px 26px 1px #bdbdbd;
|
cursor: pointer;
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
@@ -1,29 +1,24 @@
|
|||||||
import React, { useState } from 'react';
|
import { useSettingsContext } from "../SettingsContext";
|
||||||
import "./Slider.css";
|
import "./Slider.css";
|
||||||
import type { Slider } from '../types/SliderProps';
|
|
||||||
|
|
||||||
const Slider: React.FC<Slider> = ({ onValueChange }) => {
|
interface SliderProps {
|
||||||
const [sliderValue, setSliderValue] = useState(0);
|
state: number;
|
||||||
|
onChange: (value: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
const Slider: React.FC<SliderProps> = ({ state, onChange }) => {
|
||||||
const value = parseInt(event.target.value, 10);
|
const { settingsState } = useSettingsContext();
|
||||||
setSliderValue(value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseUp = () => {
|
|
||||||
onValueChange(sliderValue);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="relative w-full max-w-lg py-8 mx-auto">
|
||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
min="0"
|
min="0"
|
||||||
max="100"
|
max="100"
|
||||||
value={sliderValue}
|
value={state}
|
||||||
onChange={handleInputChange}
|
onChange={(e) => onChange(Number(e.target.value))}
|
||||||
onMouseUp={handleMouseUp}
|
className="w-full h-1 rounded-full appearance-none cursor-pointer slider"
|
||||||
className="absolute w-full h-1 rounded-full cursor-pointer range-slider focus:outline-none"
|
style={{ background: `${settingsState.customThemeColor}` }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import Switch from '../components/Switch';
|
|
||||||
import ColorPicker from '../components/ColorPicker';
|
import ColorPicker from '../components/ColorPicker';
|
||||||
|
import Switch from '../components/Switch';
|
||||||
|
import Slider from '../components/Slider';
|
||||||
|
|
||||||
import { SettingsList } from '../types/SettingsProps';
|
import { SettingsList } from '../types/SettingsProps';
|
||||||
import { useSettingsContext } from '../SettingsContext';
|
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) => {
|
const colorChange = (color: string) => {
|
||||||
setSettingsState({
|
setSettingsState({
|
||||||
...settingsState,
|
...settingsState,
|
||||||
@@ -39,7 +48,7 @@ const Settings: React.FC = () => {
|
|||||||
{
|
{
|
||||||
title: "Animated Background Speed",
|
title: "Animated Background Speed",
|
||||||
description: "Controls the speed of the animated background.",
|
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",
|
title: "Custom Theme Colour",
|
||||||
|
|||||||
Reference in New Issue
Block a user