feat: use custom slider in binaural and isochronic

.eslintrc.json

@@ -42,6 +42,7 @@
     "jsx-a11y/no-static-element-interactions": "off",
     "jsx-a11y/media-has-caption": "off",
     "jsx-a11y/no-noninteractive-tabindex": "off",
+    "jsx-a11y/label-has-associated-control": "off",
     "react/jsx-sort-props": [
       "warn",
       {

src/components/modals/binaural/binaural.module.css

@@ -36,6 +36,10 @@
       border-radius: 8px;
       outline: none;
     }
+
+    & .volume {
+      margin-top: 4px;
+    }
   }
 }
 

src/components/modals/binaural/binaural.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
 
 import { Modal } from '@/components/modal';
+import { Slider } from '@/components/slider';
 
 import styles from './binaural.module.css';
 
@@ -195,13 +196,13 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
       <div className={styles.fieldWrapper}>
         <label>
           Volume:
-          <input
-            max="1"
-            min="0"
-            step="0.01"
-            type="range"
+          <Slider
+            className={styles.volume}
+            max={1}
+            min={0}
+            step={0.01}
             value={volume}
-            onChange={e => setVolume(parseFloat(e.target.value))}
+            onChange={value => setVolume(value)}
           />
         </label>
       </div>

src/components/modals/isochronic/isochornic.module.css

@@ -36,6 +36,10 @@
       border-radius: 8px;
       outline: none;
     }
+
+    & .volume {
+      margin-top: 4px;
+    }
   }
 }
 

src/components/modals/isochronic/isochronic.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
 
 import { Modal } from '@/components/modal';
+import { Slider } from '@/components/slider';
 
 import styles from './isochornic.module.css';
 
@@ -28,7 +29,7 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
   const [baseFrequency, setBaseFrequency] = useState<number>(440); // Default A4 note
   const [beatFrequency, setBeatFrequency] = useState<number>(10); // Default 10 Hz beat
   const [volume, setVolume] = useState<number>(0.5); // Default volume at 50%
-  const [waveform, setWaveform] = useState<OscillatorType>('sine'); // Default waveform
+  const [waveform] = useState<OscillatorType>('sine'); // Default waveform
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [selectedPreset, setSelectedPreset] = useState<string>('Custom');
 
@@ -211,7 +212,7 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
               />
             </label>
           </div>
-          <div className={styles.fieldWrapper}>
+          {/* <div className={styles.fieldWrapper}>
             <label>
               Waveform:
               <select
@@ -224,19 +225,19 @@ export function IsochronicModal({ onClose, show }: IsochronicProps) {
                 <option value="triangle">Triangle</option>
               </select>
             </label>
-          </div>
+          </div> */}
         </>
       )}
       <div className={styles.fieldWrapper}>
         <label>
           Volume:
-          <input
-            max="1"
-            min="0"
-            step="0.01"
-            type="range"
+          <Slider
+            className={styles.volume}
+            max={1}
+            min={0}
+            step={0.01}
             value={volume}
-            onChange={e => setVolume(parseFloat(e.target.value))}
+            onChange={value => setVolume(value)}
           />
         </label>
       </div>