feat: improved zoom slider behaviour and styling

updated rc-slider, fixes issue where zoom happens before you release the mouse

package.json

@@ -109,7 +109,7 @@
     "p-retry": "^4.2.0",
     "pify": "3.0.0",
     "protobufjs": "^7.2.4",
-    "rc-slider": "^10.2.1",
+    "rc-slider": "^10.6.2",
     "react": "^18.2.0",
     "react-contexify": "^6.0.0",
     "react-dom": "^18.2.0",

stylesheets/_session_slider.scss

@@ -38,7 +38,7 @@
 
   height: 8px;
   border-radius: 6px;
-  margin: 0px 0px 0px -1px;
+  margin: 0px;
 }
 .rc-slider-handle {
   transition: var(--default-duration);
@@ -48,7 +48,6 @@
   cursor: pointer;
   cursor: -webkit-grab;
   margin-top: -9.5px;
-  margin-left: -2.3px;
   cursor: grab;
   border-radius: 4px;
   background-color: var(--zoom-bar-thumb-color);
@@ -97,32 +96,24 @@
   height: 4px;
   top: -4px;
   background: transparent;
+  margin-left: -3px;
 }
 .rc-slider-dot {
   position: absolute;
   bottom: -2px;
-  margin-left: -4px;
   width: 3px;
   height: 6px;
   background: var(--zoom-bar-interval-color);
-
+  margin-left: 3px;
   cursor: pointer;
   border-radius: 2px;
   vertical-align: middle;
 }
-.rc-slider-dot:first-child {
+
-  margin-left: -2px;
-}
-.rc-slider-dot:last-child {
-  margin-right: -2px;
-}
 .rc-slider-dot-active {
   border-color: var(--primary-color);
 }
-.rc-slider-dot-reverse {
+
-  margin-left: 0;
-  margin-right: -4px;
-}
 .rc-slider-disabled {
   background-color: var(--zoom-bar-track-color);
 }

ts/components/settings/ZoomingSessionSlider.tsx

@@ -2,10 +2,19 @@ import Slider from 'rc-slider';
 
 import { isNumber } from 'lodash';
 
+import { useState } from 'react';
 import useUpdate from 'react-use/lib/useUpdate';
+import styled from 'styled-components';
+import { Flex } from '../basic/Flex';
 import { SessionSettingsItemWrapper } from './SessionSettingListItem';
 
+const StyledZoomValue = styled.p`
+  min-width: 40px;
+  margin-inline-start: var(--margins-lg);
+`;
+
 export const ZoomingSessionSlider = (props: { onSliderChange?: (value: number) => void }) => {
+  const [value, setValue] = useState(window.getSettingValue('zoom-factor-setting') || 100);
   const forceUpdate = useUpdate();
   const handleSlider = async (val: number | Array<number>) => {
     const newSetting = isNumber(val) ? val : val?.[0] || 1;
@@ -15,26 +24,30 @@ export const ZoomingSessionSlider = (props: { onSliderChange?: (value: number) =
     window.updateZoomFactor();
     forceUpdate();
   };
-  const currentValueFromSettings = window.getSettingValue('zoom-factor-setting') || 100;
 
   return (
     <SessionSettingsItemWrapper title={window.i18n('zoomFactorSettingTitle')} inline={false}>
-      <div className="slider-wrapper">
+      <Flex
+        container={true}
+        justifyContent={'flex-start'}
+        alignItems={'center'}
+        margin={'var(--margins-lg) var(--margins-sm)'}
+      >
         <Slider
           dots={true}
           step={20}
           min={60}
           max={200}
-          defaultValue={currentValueFromSettings}
+          value={value}
-          onChange={e => {
+          onChange={(val: number | Array<number>) => {
+            setValue(isNumber(val) ? val : val?.[0] || 1);
+          }}
+          onChangeComplete={e => {
             void handleSlider(e);
           }}
         />
-
+        <StyledZoomValue>{value}%</StyledZoomValue>
-        <div className="slider-info">
+      </Flex>
-          <p>{currentValueFromSettings}%</p>
-        </div>
-      </div>
     </SessionSettingsItemWrapper>
   );
 };

yarn.lock

@@ -6044,19 +6044,19 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-rc-slider@^10.2.1:
+rc-slider@^10.6.2:
-  version "10.5.0"
+  version "10.6.2"
-  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.5.0.tgz#1bd4853d114cb3403b67c485125887adb6a2a117"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.6.2.tgz#8bd3b63b24f2f3682ea1bf86d021073189cf33eb"
-  integrity sha512-xiYght50cvoODZYI43v3Ylsqiw14+D7ELsgzR40boDZaya1HFa1Etnv9MDkQE8X/UrXAffwv2AcNAhslgYuDTw==
+  integrity sha512-FjkoFjyvUQWcBo1F3RgSglky3ar0+qHLM41PlFVYB4Bj3RD8E/Mv7kqMouLFBU+3aFglMzzctAIWRwajEuueSw==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "^2.2.5"
-    rc-util "^5.27.0"
+    rc-util "^5.36.0"
 
-rc-util@^5.27.0:
+rc-util@^5.36.0:
-  version "5.39.1"
+  version "5.39.3"
-  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.39.1.tgz#7bca4fb55e20add0eef5c23166cd9f9e5f51a8a1"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.39.3.tgz#79c7253cff7c71175b772e8242ca66459c1512eb"
-  integrity sha512-OW/ERynNDgNr4y0oiFmtes3rbEamXw7GHGbkbNd9iRr7kgT03T6fT0b9WpJ3mbxKhyOcAHnGcIoh5u/cjrC2OQ==
+  integrity sha512-j9wOELkLQ8gC/NkUg3qg9mHZcJf+5mYYv40JrDHqnaf8VSycji4pCf7kJ5fdTXQPDIF0vr5zpb/T2HdrMs9rWA==
   dependencies:
     "@babel/runtime" "^7.18.3"
     react-is "^18.2.0"