feat: modify slider when disabled

src/index.css

@@ -124,6 +124,9 @@ body,
   .slider {
     @apply relative flex h-10 w-full cursor-pointer select-none items-center;
   }
+  .slider [data-disabled] {
+    @apply pointer-events-none opacity-50;
+  }
   .slider > span:nth-child(1) {
     @apply relative h-[5px] flex-grow rounded-full bg-gray-200;
   }

src/pages/Typing/components/Setting/SoundSetting.tsx

@@ -88,6 +88,7 @@ export default function SoundSetting() {
               step={10}
               className="slider"
               onValueChange={onChangePronunciationVolume}
+              disabled={!pronunciationConfig.isOpen}
             >
               <Slider.Track>
                 <Slider.Range />
@@ -118,6 +119,7 @@ export default function SoundSetting() {
               step={10}
               className="slider"
               onValueChange={onChangeKeySoundsVolume}
+              disabled={!keySoundsConfig.isOpen}
             >
               <Slider.Track>
                 <Slider.Range />
@@ -148,6 +150,7 @@ export default function SoundSetting() {
               step={10}
               className="slider"
               onValueChange={onChangeHintSoundsVolume}
+              disabled={!hintSoundsConfig.isOpen}
             >
               <Slider.Track>
                 <Slider.Range />