style sliders

src/Components/Views/StartMenu/StartMenu.tsx

@@ -12,10 +12,11 @@ import {
   defaultInitialGameSettings,
 } from '../../../Types/Settings';
 
-import { LayoutOptions } from './LayoutOptions';
+import { baseColors } from '../../../../tailwind.config';
 import { InfoDialog } from '../../Dialogs/InfoDialog';
 import { SettingsDialog } from '../../Dialogs/SettingsDialog';
 import { ToggleButton } from '../../Misc/ToggleButton';
+import { LayoutOptions } from './LayoutOptions';
 
 const commanderSettings: Pick<
   InitialGameSettings,
@@ -67,6 +68,8 @@ const Start = () => {
 
   const infoDialogRef = useRef<HTMLDialogElement | null>(null);
   const settingsDialogRef = useRef<HTMLDialogElement | null>(null);
+  const playersSliderRef = useRef<HTMLInputElement | null>(null);
+  const healthSliderRef = useRef<HTMLInputElement | null>(null);
 
   const [playerOptions, setPlayerOptions] = useState<InitialGameSettings>(
     initialGameSettings || defaultInitialGameSettings
@@ -81,6 +84,68 @@ const Start = () => {
     }
   });
 
+  useEffect(() => {
+    if (!playersSliderRef.current) {
+      return;
+    }
+
+    let progress = 0;
+
+    switch (playerOptions?.numberOfPlayers) {
+      case 1:
+        progress = 0;
+        break;
+      case 2:
+        progress = 20;
+        break;
+      case 3:
+        progress = 40;
+        break;
+      case 4:
+        progress = 60;
+        break;
+      case 5:
+        progress = 80;
+        break;
+      case 6:
+        progress = 100;
+        break;
+      default:
+        break;
+    }
+
+    playersSliderRef.current.style.background = `linear-gradient(to right, ${baseColors.secondary.main} ${progress}%, ${baseColors.secondary.dark} ${progress}%)`;
+  }, [playerOptions?.numberOfPlayers]);
+
+  useEffect(() => {
+    if (!healthSliderRef.current) {
+      return;
+    }
+
+    let progress = 0;
+    switch (playerOptions?.startingLifeTotal) {
+      case 20:
+        progress = 0;
+        break;
+      case 30:
+        progress = 25;
+        break;
+      case 40:
+        progress = 50;
+        break;
+      case 50:
+        progress = 75;
+        break;
+      case 60:
+        progress = 100;
+        break;
+      default:
+        break;
+    }
+
+    healthSliderRef.current.style.background = `linear-gradient(to right, ${baseColors.secondary.main} ${progress}%, ${baseColors.secondary.dark} ${progress}%)`;
+  }, [playerOptions?.startingLifeTotal]);
+
   useEffect(() => {
     setInitialGameSettings(playerOptions);
   }, [playerOptions, setInitialGameSettings]);
@@ -250,6 +315,7 @@ const Start = () => {
               <LabelText className="mt-4">Number of Players</LabelText>
               <SliderWrapper>
                 <input
+                  ref={playersSliderRef}
                   className="accent-primary-main text-primary-dark w-full h-3 rounded-lg cursor-pointer"
                   title="Number of Players"
                   type="range"
@@ -264,7 +330,7 @@ const Start = () => {
                     });
                   }}
                 />
-                <div className="flex w-full justify-between px-1 text-text-primary pointer-events-none">
+                <div className="flex w-full justify-between px-[6px] text-text-primary pointer-events-none">
                   <div>1</div>
                   <div>2</div>
                   <div>3</div>
@@ -277,6 +343,7 @@ const Start = () => {
               <LabelText className="mt-4">Starting Health</LabelText>
               <SliderWrapper>
                 <input
+                  ref={healthSliderRef}
                   className="accent-primary-main text-primary-dark w-full h-3 rounded-lg cursor-pointer"
                   title="Starting Health"
                   type="range"
@@ -293,7 +360,7 @@ const Start = () => {
                     })
                   }
                 />
-                <div className="flex w-full justify-between px-1 text-text-primary pointer-events-none">
+                <div className="flex w-full justify-between text-text-primary pointer-events-none">
                   <div>20</div>
                   <div>30</div>
                   <div>40</div>

src/index.css

@@ -80,3 +80,72 @@ code {
     -ms-overflow-style: auto;
   }
 }
+
+input[type='range'] {
+  -webkit-appearance: none;
+  transition: background 450ms ease-in;
+  margin: 10px 0;
+  width: 100%;
+  background: theme('colors.secondary.main');
+}
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 0.875rem;
+  cursor: pointer;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 25px;
+  border: 0px solid #000101;
+}
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border: 0px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 100px;
+  background: theme('colors.primary.main');
+  cursor: pointer;
+  margin-top: -3px;
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 0.875rem;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border-radius: 25px;
+  border: 0px solid #000101;
+}
+input[type='range']::-moz-range-thumb {
+  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+  border: 0px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 100px;
+  background: theme('colors.primary.main');
+  cursor: pointer;
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 0.875rem;
+  cursor: pointer;
+  animate: 0.2s;
+  background: transparent;
+  border-color: transparent;
+  border-width: 39px 0;
+  color: transparent;
+}
+input[type='range']::-ms-thumb {
+  height: 20px;
+  width: 20px;
+  border-radius: 100px;
+  background: theme('colors.primary.main');
+  cursor: pointer;
+  margin-top: -3px;
+}