Add dragging to useLayoutEffect dependency array in Slider and add sl…

src/components/inputs/Slider/Handle.tsx

@@ -36,7 +36,7 @@ export function Handle({
   return (
     <HandleStyled
       focused={focused === handle || dragging === handle}
-      style={{ left: value + '%' }}
+      style={{ left: (value / max) * 100 + '%' }}
       onMouseDown={() => !disabled && setDragging(handle)}
       {...props}
     >

src/components/inputs/Slider/Slider.props.story.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Slider } from './Slider';
 
 import { Layout } from '../../../storybook';
+import { PopOver } from '../../PopOver/PopOver';
+import { Button } from '../../Button/Button';
 
 export default {
   title: 'components/Slider/props',
@@ -60,3 +62,58 @@ export function EditableLabel({ args }) {
   );
 }
 EditableLabel.storyName = 'EditableLabel';
+
+export function InPopover({ ...args }) {
+  const [active, setActive] = useState(false);
+  return (
+    <Layout.StoryPadded>
+      <Slider editableLabel />
+      <Slider initialValues={[40, 100]} />
+      <Slider
+        {...args}
+        editableLabel
+        range
+        initialValues={[177, 200]}
+        max={200}
+        min={0}
+      />
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <PopOver
+          active={active}
+          attach="bottom"
+          content={PopOverContent}
+        >
+          <Button onClick={() => setActive(!active)}>
+            Open Popover with Sliders
+          </Button>
+        </PopOver>
+      </div>
+    </Layout.StoryPadded>
+  );
+}
+
+const PopOverContent = (
+  <div
+    style={{
+      width: '500px',
+      height: '400px',
+      padding: '3rem',
+    }}
+  >
+    <Slider editableLabel />
+    <Slider initialValues={[40, 100]} />
+    <Slider
+      editableLabel
+      range
+      initialValues={[177, 200]}
+      max={200}
+      min={0}
+    />
+  </div>
+);

src/components/inputs/Slider/Slider.style.ts

@@ -72,14 +72,15 @@ export const Background = styled.div`
   border-radius: 0.125rem;
 `;
 
-export const ActiveRange = styled.div.attrs<{ values?: number[] }>(
-  ({ values }) => ({
-    style: {
-      width: values[1] - values[0] + '%',
-      left: values[0] + '%',
-    },
-  })
-)<{ values?: number[] }>`
+export const ActiveRange = styled.div.attrs<{
+  values?: number[];
+  max?: number;
+}>(({ values, max }) => ({
+  style: {
+    width: ((values[1] - values[0]) / max) * 100 + '%',
+    left: (values[0] / max) * 100 + '%',
+  },
+}))<{ values?: number[]; max?: number }>`
   pointer-events: none;
   position: absolute;
   height: 100%;

src/components/inputs/Slider/Slider.tsx

@@ -67,7 +67,7 @@ export function Slider({
   useLayoutEffect(() => {
     const { left, width } = geometry(ref.current);
     dispatch({ type: 'SET_TRACK_RECT', payload: { left, width } });
-  }, []);
+  }, [dragging]);
 
   useEffect(() => {
     const mouseup = () => dragging && setDragging(false);
@@ -94,7 +94,7 @@ export function Slider({
 
   return (
     <div {...props} style={{ color: white, margin: '4rem 0' }}>
-      <Track ref={ref} values={values} id="track-1">
+      <Track ref={ref} values={values} id="track-1" max={max}>
         <Handle
           disabled={disabled}
           dragging={dragging}
@@ -138,22 +138,23 @@ interface TrackProps {
   id?: string;
   ref: Ref<HTMLDivElement>;
   values: number[];
+  max: number;
 }
 
 const Track = forwardRef(
-  ({ children, values, ...props }: TrackProps, ref) => {
+  ({ children, values, max, ...props }: TrackProps, ref) => {
     return (
       <Background ref={ref} {...props}>
         {children}
-        <ActiveRange values={values}></ActiveRange>
+        <ActiveRange values={values} max={max}></ActiveRange>
       </Background>
     );
   }
 );
 
 function constrainedPosition(event, element, min, max) {
   const left = event.clientX - element.left;
-  const pos = Math.round((left / element.width) * 100);
+  const pos = Math.round((left / element.width) * max);
 
   return constrain(min, max)(pos);
 }