refactor: seperate range input

src/components/sound/range/index.ts

@@ -0,0 +1 @@
+export { Range } from './range';

src/components/sound/range/range.module.css

@@ -0,0 +1,72 @@
+.range {
+  width: 100%;
+  max-width: 120px;
+  margin-top: 10px;
+
+  /********** Range Input Styles **********/
+
+  /* Range Reset */
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+
+  /* Removes default focus */
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /***** Chrome, Safari, Opera and Edge Chromium styles *****/
+
+  &::-webkit-slider-runnable-track {
+    height: 0.5rem;
+    border-radius: 0.5rem;
+    background-color: #27272a;
+  }
+
+  &::-webkit-slider-thumb {
+    width: 14px;
+    height: 14px;
+    border: 1px solid #52525b;
+    border-radius: 50%;
+    margin-top: -3px;
+    appearance: none;
+    background-color: #3f3f46;
+  }
+
+  &:not(:disabled):focus::-webkit-slider-thumb {
+    border: 1px solid #053a5f;
+    outline: 3px solid #053a5f;
+    outline-offset: 0.125rem;
+  }
+
+  /******** Firefox styles ********/
+
+  &::-moz-range-track {
+    height: 0.5rem;
+    border-radius: 0.5rem;
+    background-color: #27272a;
+  }
+
+  &::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border: none;
+    border: 1px solid #52525b;
+    border-radius: 0;
+    border-radius: 50%;
+    margin-top: -3px;
+    background-color: #3f3f46;
+  }
+
+  &:not(:disabled):focus::-moz-range-thumb {
+    border: 1px solid #053a5f;
+    outline: 3px solid #053a5f;
+    outline-offset: 0.125rem;
+  }
+}

src/components/sound/range/range.tsx

@@ -0,0 +1,29 @@
+import { useSoundStore } from '@/store';
+
+import styles from './range.module.css';
+
+interface RangeProps {
+  id: string;
+  label: string;
+}
+
+export function Range({ id, label }: RangeProps) {
+  const setVolume = useSoundStore(state => state.setVolume);
+  const volume = useSoundStore(state => state.sounds[id].volume);
+  const isSelected = useSoundStore(state => state.sounds[id].isSelected);
+
+  return (
+    <input
+      aria-labelledby={label}
+      autoComplete="off"
+      className={styles.range}
+      disabled={!isSelected}
+      max={100}
+      min={0}
+      type="range"
+      value={volume * 100}
+      onChange={e => isSelected && setVolume(id, Number(e.target.value) / 100)}
+      onClick={e => e.stopPropagation()}
+    />
+  );
+}

src/components/sound/sound.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect } from 'react';
 
+import { Range } from './range';
+
 import { useSound } from '@/hooks/use-sound';
 import { useSoundStore } from '@/store';
 import { usePlay } from '@/contexts/play';
@@ -27,11 +29,6 @@ export function Sound({
   unselectHidden,
 }: SoundProps) {
   const { isPlaying, play } = usePlay();
-  // const [isSelected, setIsSelected] = useLocalStorage(
-  //   `${label}-is-selected`,
-  //   false,
-  // );
-  // const [volume, setVolume] = useLocalStorage(`${label}-volume`, 0.5);
 
   const select = useSoundStore(state => state.select);
   const unselect = useSoundStore(state => state.unselect);
@@ -81,21 +78,8 @@ export function Sound({
       onKeyDown={toggle}
     >
       <div className={styles.icon}>{icon}</div>
-
       <h3 id={label}>{label}</h3>
-      <input
+      <Range id={id} label={label} />
-        aria-labelledby={label}
-        autoComplete="off"
-        disabled={!isSelected}
-        max={100}
-        min={0}
-        type="range"
-        value={volume * 100}
-        onClick={e => e.stopPropagation()}
-        onChange={e =>
-          isSelected && setVolume(id, Number(e.target.value) / 100)
-        }
-      />
     </div>
   );
 }