1 files changed, 12 insertions, 10 deletions

diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/sound.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/sound.jsx
index 7301426..a3c5cab 100755
--- a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/sound.jsx
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/sound.jsx
@@ -58,7 +58,7 @@ export const Widget = React.memo(() => {
       `osascript -e 'set v to get volume settings' -e 'output volume of v & output muted of v'`,
       refresh,
     );
-    const parts = Utils.cleanupOutput(output).split(",");
+    const parts = Utils.cleanupOutput(output).split(", ");
     setState({
       volume: parts[0],
       muted: parts[1],
@@ -71,11 +71,6 @@ export const Widget = React.memo(() => {
   // Refresh the widget at the specified interval.
   useWidgetRefresh(visible, getSound, refresh);
 
-  // Update the sound settings when dragging ends.
-  React.useEffect(() => {
-    if (!dragging) setSound(volume);
-  }, [dragging, volume]);
-
   // Update the volume state when the fetched volume changes.
   React.useEffect(() => {
     setVolume((currentVolume) => {
@@ -106,8 +101,14 @@ export const Widget = React.memo(() => {
     setVolume(value);
   };
 
-  const onMouseDown = () => setDragging(true);
-  const onMouseUp = () => setDragging(false);
+  const onInteractionEnd = (e) => {
+    setDragging(false);
+    const finalVolume = parseInt(e.target.value, 10);
+    setSound(finalVolume);
+  };
+
+  // const onMouseDown = () => setDragging(true);
+  // const onMouseUp = () => setDragging(false);
 
   const formattedVolume = `${volume.toString().padStart(2, "0")}%`;
 
@@ -133,8 +134,9 @@ export const Widget = React.memo(() => {
           step="1"
           value={volume}
           className="sound__slider"
-          onMouseDown={onMouseDown}
-          onMouseUp={onMouseUp}
+          onMouseDown={() => setDragging(true)}
+          onMouseUp={onInteractionEnd}
+          onKeyUp={onInteractionEnd}
           onChange={onChange}
         />
       </div>