Make the volume slider less silly

Previously, dragging it all the way to the left would *not* mute the participant but rather bottom out at 10% volume, and people have found this unintuitive. Let's make it less silly by giving the slider a range of 0% to 100%, and making the mute toggle button have the same effect as dragging the slider to zero. When unmuting, it will reset to the last non-zero "committed" volume, similar to how the volume sliders in desktop environments work.

src/Slider.tsx

@@ -16,6 +16,7 @@ interface Props {
   label: string;
   value: number;
   onValueChange: (value: number) => void;
+  onValueCommit?: (value: number) => void;
   min: number;
   max: number;
   step: number;
@@ -30,6 +31,7 @@ export const Slider: FC<Props> = ({
   label,
   value,
   onValueChange: onValueChangeProp,
+  onValueCommit: onValueCommitProp,
   min,
   max,
   step,
@@ -39,12 +41,17 @@ export const Slider: FC<Props> = ({
     ([v]: number[]) => onValueChangeProp(v),
     [onValueChangeProp],
   );
+  const onValueCommit = useCallback(
+    ([v]: number[]) => onValueCommitProp?.(v),
+    [onValueCommitProp],
+  );
 
   return (
     <Root
       className={classNames(className, styles.slider)}
       value={[value]}
       onValueChange={onValueChange}
+      onValueCommit={onValueCommit}
       min={min}
       max={max}
       step={step}