fix(client): update css selector for soundbar styling (freeCodeCamp#65808)

Author: AdityaSingh-18

client/src/components/settings/sound.css

@@ -3,16 +3,13 @@
   width: 100%;
   height: 25px;
   background: var(--quaternary-background);
-}
-
-input[type='range'] {
   appearance: none;
   overflow: hidden;
   border: 2px solid var(--secondary-color);
 }
 
 /* Special styling for WebKit/Blink */
-input[type='range']::-webkit-slider-thumb {
+.soundbar::-webkit-slider-thumb {
   box-shadow: -2000px 0 0 2000px var(--gray-45);
   -webkit-appearance: none;
   border: 2px solid var(--primary-color);
@@ -23,7 +20,7 @@ input[type='range']::-webkit-slider-thumb {
 }
 
 /* All the same stuff for Firefox */
-input[type='range']::-moz-range-thumb {
+.soundbar::-moz-range-thumb {
   box-shadow: -2000px 0 0 2000px var(--gray-45);
   border: 2px solid var(--primary-color);
   border-radius: 0;
@@ -33,7 +30,7 @@ input[type='range']::-moz-range-thumb {
   cursor: pointer;
 }
 
-input[type='range']::-moz-range-progress {
+.soundbar::-moz-range-progress {
   background: var(--gray-90);
   height: 25px;
 }