@toptal/picasso-slider 1.0.6 → 2.0.0

package/dist-package/src/utils/check-overlap.js

@@ -0,0 +1,32 @@
+/**
+ * if we have range slider, there is a chance
+ * when we select values next to each other
+ * that the lables might overlap each other. Like this example:
+ * [   [ ]   ]
+ *    A   B
+ *
+ * In that case we need to reposition the labels to the edges of the thumb.
+ * [  ]   [  ]
+ *    A  B
+ *
+ * In next rerender when we recalculate the position of the labels the
+ * above example would end with result as not overlapping as the position was already changed.
+ * So we need to work with the previous result of this function `previousResult`. When
+ * true we need to add half of the width of the label to simulate the center position.
+ *
+ * This function checks and returns if the labels overlap.
+ * It is called on each render of the component and everytime the Slider changes value.
+ **/
+export const checkOverlap = ({ firstLabelRect, secondLabelRect, previousResult, }) => {
+    const gap = 16;
+    const halfWidth1 = firstLabelRect.width / 2;
+    const halfWidth2 = secondLabelRect.width / 2;
+    const rightBoundaryOfFirstLabel = previousResult
+        ? firstLabelRect.right + halfWidth1
+        : firstLabelRect.right;
+    const leftBoundaryOfSecondLabel = previousResult
+        ? secondLabelRect.left - halfWidth2
+        : secondLabelRect.left;
+    return rightBoundaryOfFirstLabel + gap > leftBoundaryOfSecondLabel;
+};
+//# sourceMappingURL=check-overlap.js.map

package/dist-package/src/utils/check-overlap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-overlap.js","sourceRoot":"","sources":["../../../src/utils/check-overlap.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;IAkBI;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,cAAc,EACd,eAAe,EACf,cAAc,GACI,EAAW,EAAE;IAC/B,MAAM,GAAG,GAAG,EAAE,CAAA;IACd,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,GAAG,CAAC,CAAA;IAC3C,MAAM,UAAU,GAAG,eAAe,CAAC,KAAK,GAAG,CAAC,CAAA;IAE5C,MAAM,yBAAyB,GAAG,cAAc;QAC9C,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,UAAU;QACnC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAA;IACxB,MAAM,yBAAyB,GAAG,cAAc;QAC9C,CAAC,CAAC,eAAe,CAAC,IAAI,GAAG,UAAU;QACnC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAA;IAExB,OAAO,yBAAyB,GAAG,GAAG,GAAG,yBAAyB,CAAA;AACpE,CAAC,CAAA"}

package/dist-package/src/utils/get-x-placement.d.ts

@@ -0,0 +1,8 @@
+export declare type GetPositionProps = {
+    rect: DOMRect;
+    isOverlaped: boolean;
+    isFirstLabel: boolean;
+    currentPlacement: 'left' | 'right' | 'center';
+};
+export declare const getXPlacement: ({ rect: { width, left, right }, isOverlaped, isFirstLabel, currentPlacement, }: GetPositionProps) => 'left' | 'right' | 'center';
+//# sourceMappingURL=get-x-placement.d.ts.map

package/dist-package/src/utils/get-x-placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-x-placement.d.ts","sourceRoot":"","sources":["../../../src/utils/get-x-placement.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAA;IACb,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,EAAE,OAAO,CAAA;IACrB,gBAAgB,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;CAC9C,CAAA;AAED,eAAO,MAAM,aAAa,mFAKvB,gBAAgB,KAAG,MAAM,GAAG,OAAO,GAAG,QAexC,CAAA"}

package/dist-package/src/utils/get-x-placement.js

@@ -0,0 +1,17 @@
+export const getXPlacement = ({ rect: { width, left, right }, isOverlaped, isFirstLabel, currentPlacement, }) => {
+    const gap = 16;
+    const halfWidth = width / 2;
+    const leftBoundary = currentPlacement === 'right' ? left - halfWidth : left;
+    const rightBoundary = currentPlacement === 'left' ? right + halfWidth : right;
+    if (leftBoundary < gap) {
+        return 'right';
+    }
+    else if (rightBoundary > window.innerWidth - gap) {
+        return 'left';
+    }
+    else if (isOverlaped) {
+        return isFirstLabel ? 'left' : 'right';
+    }
+    return 'center';
+};
+//# sourceMappingURL=get-x-placement.js.map

package/dist-package/src/utils/get-x-placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-x-placement.js","sourceRoot":"","sources":["../../../src/utils/get-x-placement.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAC5B,WAAW,EACX,YAAY,EACZ,gBAAgB,GACC,EAA+B,EAAE;IAClD,MAAM,GAAG,GAAG,EAAE,CAAA;IACd,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAA;IAC3B,MAAM,YAAY,GAAG,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;IAC3E,MAAM,aAAa,GAAG,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;IAE7E,IAAI,YAAY,GAAG,GAAG,EAAE;QACtB,OAAO,OAAO,CAAA;KACf;SAAM,IAAI,aAAa,GAAG,MAAM,CAAC,UAAU,GAAG,GAAG,EAAE;QAClD,OAAO,MAAM,CAAA;KACd;SAAM,IAAI,WAAW,EAAE;QACtB,OAAO,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;KACvC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/dist-package/src/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './check-bg-color';
+export * from './check-overlap';
+export * from './get-x-placement';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}

package/dist-package/src/utils/index.js

@@ -0,0 +1,4 @@
+export * from './check-bg-color';
+export * from './check-overlap';
+export * from './get-x-placement';
+//# sourceMappingURL=index.js.map

package/dist-package/src/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-slider",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "description": "Toptal UI components library - Slider",
   "publishConfig": {
     "access": "public"
@@ -22,18 +22,16 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
+    "@mui/base": "5.0.0-beta.40",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-tooltip": "1.1.3",
     "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "tailwind-merge": "^2.2.2"
   },
-  "sideEffects": [
-    "**/styles.ts",
-    "**/styles.js"
-  ],
+  "sideEffects": false,
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
+    "@toptal/picasso-tailwind": ">2.1.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {

package/src/Slider/Slider.tsx

@@ -1,75 +1,59 @@
-import type { ChangeEvent, ComponentProps } from 'react'
-import React, { forwardRef, useRef, useMemo } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import type { ValueLabelProps as MUIValueLabelProps } from '@material-ui/core'
-import { Slider as MUISlider } from '@material-ui/core'
-import cx from 'classnames'
-import { useCombinedRefs } from '@toptal/picasso-utils'
+// import type { ComponentProps } from 'react'
+import React, { forwardRef, useRef } from 'react'
+import { Slider as MUIBaseSlider } from '@mui/base/Slider'
+import { useCombinedRefs, useOnScreen } from '@toptal/picasso-utils'
+import { twJoin, twMerge } from 'tailwind-merge'
+import type { BaseProps } from '@toptal/picasso-shared'
 
-import type { ValueLabelProps } from '../SliderValueLabel'
-import { SliderValueLabel } from '../SliderValueLabel'
-import { SliderContextProvider } from './SliderContext'
-import styles from './styles'
+import SliderMark from '../SliderMark'
+import SliderValueLabel from '../SliderValueLabel'
+import { useLabelOverlap } from './hooks'
 
-const useStyles = makeStyles<Theme>(styles)
-
-type Value = number | number[]
-type ValueLabelDisplay = 'on' | 'auto' | 'off'
-
-export interface Props extends ComponentProps<typeof MUISlider> {
+export interface Props extends BaseProps {
   /** Minimum slider value */
   min?: number
   /** Maximum slider value */
   max?: number
   /** Controlled value of the component */
-  value?: Value
-  /** The default value. Use when the component is not controlled. */
-  defaultValue?: Value
+  value?: number | number[]
+  /** The default value. Use when the component is not controlled */
+  defaultValue?: number | number[]
   /** Step for the thumb movement */
   step?: number
   /** Whether marks are shown or not */
   marks?: boolean
   /** Whether component is disabled or not */
   disabled?: boolean
-  // Workaround for https://github.com/mui-org/material-ui/issues/21889
-  /** The tooltip component. */
-  TooltipComponent?: React.ElementType<ValueLabelProps & { index: number }>
   /** Controls when tooltip is displayed:
   - **auto** the value tooltip will display when the thumb is hovered or focused.
   - **on** will display persistently.
   - **off** will never display
   */
-  tooltip?: ValueLabelDisplay
+  tooltip?: 'on' | 'auto' | 'off'
   /** The format function the value tooltip's value. */
   tooltipFormat?: string | ((value: number, index: number) => React.ReactNode)
-  /** Show a compact tooltip */
-  compact?: boolean
-  /** Disable the portal behavior of the tooltip. The children stay within it's parent */
-  disablePortal?: boolean
   /** Callback invoked when slider changes its state. */
-  onChange?: (event: ChangeEvent<{}>, value: Value) => void
+  onChange?: (
+    event: Event,
+    value: number | number[],
+    activeThumb: number
+  ) => void
+  /** Callback invoked on focus */
+  onFocus?: (event: React.FocusEvent<HTMLElement>) => void
+  /** Callback invoked on blur */
+  onBlur?: (event: React.FocusEvent<HTMLElement>) => void
   /** Hide thumb when value is undefined or null. Works only when the component is controlled. */
   hideThumbOnEmpty?: boolean
   /** Disable track highlight. */
   disableTrackHighlight?: boolean
-}
-
-const createDefaultValueLabelComponent = (
-  tooltip?: ValueLabelDisplay,
-  disablePortal?: boolean,
-  compact?: boolean
-) => {
-  const ValueLableComponent = (props: ValueLabelProps) => (
-    <SliderValueLabel
-      {...props}
-      tooltip={tooltip}
-      disablePortal={disablePortal}
-      compact={compact}
-    />
-  )
-
-  return ValueLableComponent
+  /**
+   * Name attribute of the `input` element.
+   */
+  name?: string
+  /**
+   * Id attribute of the `input` element.
+   */
+  id?: string
 }
 
 export const Slider = forwardRef<HTMLElement, Props>(function Slider(
@@ -82,73 +66,103 @@ export const Slider = forwardRef<HTMLElement, Props>(function Slider(
     marks,
     value,
     defaultValue = 0,
-    tooltip,
+    tooltip = 'off',
     tooltipFormat,
-    compact,
-    TooltipComponent: UserDefinedTooltip,
     step,
     disabled,
-    disablePortal,
     onChange,
+    onBlur,
+    onFocus,
     hideThumbOnEmpty,
     disableTrackHighlight,
-    ...rest
+    className,
+    style,
+    name,
+    id,
+    'data-private': dataPrivate,
+    'data-testid': dataTestid,
   } = props
-  const {
-    wrapper,
-    markTrack,
-    hideThumb,
-    markInactive,
-    unmarkTrack,
-    ...classes
-  } = useStyles()
+  const containerRef = useRef<HTMLDivElement>(null)
   const sliderRef = useCombinedRefs<HTMLElement>(ref, useRef<HTMLElement>(null))
+  const { isPartiallyOverlapped, handleValueLabelOnRender } = useLabelOverlap({
+    value,
+  })
 
   const isThumbHidden =
     hideThumbOnEmpty && (typeof value === 'undefined' || value === null)
 
-  const DefaultValueLabelComponent = useMemo(
-    () => createDefaultValueLabelComponent(tooltip, disablePortal, compact),
-    [tooltip, disablePortal, compact]
-  )
-
-  // From Workaround for https://github.com/mui-org/material-ui/issues/21889
-  const ValueLabelComponent = (UserDefinedTooltip ||
-    DefaultValueLabelComponent) as unknown as React.ElementType<MUIValueLabelProps>
+  // The rootMargin is not working correctly in the storybooks iframe
+  // To test properly we can open the iframe in new window
+  const isContainerOnScreen = useOnScreen({
+    ref: containerRef,
+    rootMargin: '-24px 0px 0px 0px',
+    threshold: 1,
+  })
 
   return (
-    <SliderContextProvider>
-      <div className={wrapper}>
-        <MUISlider
-          {...rest}
-          ref={sliderRef}
-          defaultValue={defaultValue}
-          value={value}
-          min={min}
-          max={max}
-          step={step}
-          marks={marks}
-          disabled={disabled}
-          classes={{
-            ...classes,
-            track: cx(classes.track, {
-              [markTrack]: marks,
-              [unmarkTrack]: disableTrackHighlight,
-            }),
-            thumb: cx(classes.thumb, {
-              [hideThumb]: isThumbHidden,
-            }),
-            markActive: cx(classes.markActive, {
-              [markInactive]: isThumbHidden || disableTrackHighlight,
-            }),
-          }}
-          ValueLabelComponent={ValueLabelComponent}
-          valueLabelFormat={tooltipFormat}
-          valueLabelDisplay={tooltip}
-          onChange={onChange}
-        />
-      </div>
-    </SliderContextProvider>
+    <div
+      ref={containerRef}
+      className={twMerge('my-[6px] mx-0', className)}
+      style={style}
+    >
+      <MUIBaseSlider
+        ref={sliderRef}
+        defaultValue={defaultValue}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        marks={marks}
+        disabled={disabled}
+        data-testid={dataTestid}
+        data-private={dataPrivate}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        name={name}
+        id={id}
+        slots={{
+          mark: SliderMark,
+          valueLabel: SliderValueLabel,
+        }}
+        slotProps={{
+          mark: {
+            // @ts-expect-error we have custom Mark component, where we extend props and MUI does not understand it
+            forceInactive: disableTrackHighlight,
+          },
+          root: {
+            className:
+              'block cursor-pointer width-full relative py-[6px] -my-[6px]',
+          },
+          rail: {
+            className:
+              'block absolute w-full h-[1px] opacity-[0.24] rounded-none bg-gray-500',
+          },
+          thumb: {
+            className: twJoin(
+              'group/thumb flex justify-center items-center w-[15px] h-[15px]',
+              'rounded-[50%] bg-blue-500 border-[2px] border-solid border-white',
+              '-mt-[7px] -ml-[6px] outline-0 absolute  transition-shadow cursor-pointer',
+              isThumbHidden && 'hidden'
+            ),
+            role: 'slider',
+          },
+          track: {
+            className: twJoin(
+              'block absolute h-[1px]',
+              disableTrackHighlight ? 'bg-gray-200' : 'bg-blue-500'
+            ),
+          },
+          valueLabel: {
+            tooltip,
+            onRender: handleValueLabelOnRender,
+            yPlacement: isContainerOnScreen ? 'top' : 'bottom',
+            isOverlaped: isPartiallyOverlapped,
+          },
+        }}
+        valueLabelFormat={tooltipFormat}
+        onChange={onChange}
+      />
+    </div>
   )
 })
 
@@ -159,7 +173,6 @@ Slider.defaultProps = {
   min: 0,
   max: 100,
   tooltip: 'off',
-  disablePortal: false,
 }
 
 export default Slider

package/src/Slider/__snapshots__/test.tsx.snap

@@ -3,33 +3,47 @@
 exports[`Slider renders 1`] = `
 <div>
   <div
-    class="makeStyles-wrapper"
+    class="my-[6px] mx-0"
   >
     <span
-      class="MuiSlider-root makeStyles-root MuiSlider-colorPrimary"
+      class="base-Slider block cursor-pointer width-full relative py-[6px] -my"
     >
       <span
-        class="MuiSlider-rail makeStyles-rail"
+        class="base-Slider block absolute w-full h-[1px] opacity-[0.24] rounded-none bg-gray"
       />
       <span
-        class="MuiSlider-track makeStyles-track"
+        class="base-Slider block absolute h-[1px] bg-blue"
         style="left: 0%; width: 0%;"
       />
-      <input
-        type="hidden"
-        value="0"
-      />
       <span
-        aria-orientation="horizontal"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="0"
-        class="MuiSlider-thumb makeStyles-thumb MuiSlider-thumbColorPrimary"
+        class="base-Slider group/thumb flex justify-center items-center w-[15px] h-[15px] rounded-[50%] bg-blue border-[2px] border-solid border-white -mt -ml outline-0 absolute transition-shadow cursor-pointer"
         data-index="0"
         role="slider"
         style="left: 0%;"
-        tabindex="0"
-      />
+      >
+        <input
+          aria-orientation="horizontal"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          data-index="0"
+          max="100"
+          min="0"
+          step="1"
+          style="border: 0px; height: 100%; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 100%; direction: ltr;"
+          type="range"
+          value="0"
+        />
+        <span
+          class="absolute will-change transition-transform hidden top-[calc(100%+2px)] left-[calc(100%-13px)]"
+        >
+          <span
+            class="shadow-4 text-sm text-white bg-graphite m-1 rounded-sm py-[2px] px-2 max-w break-words"
+          >
+            0
+          </span>
+        </span>
+      </span>
     </span>
   </div>
 </div>
@@ -38,33 +52,47 @@ exports[`Slider renders 1`] = `
 exports[`Slider with initial value 1`] = `
 <div>
   <div
-    class="makeStyles-wrapper"
+    class="my-[6px] mx-0"
   >
     <span
-      class="MuiSlider-root makeStyles-root MuiSlider-colorPrimary"
+      class="base-Slider block cursor-pointer width-full relative py-[6px] -my"
     >
       <span
-        class="MuiSlider-rail makeStyles-rail"
+        class="base-Slider block absolute w-full h-[1px] opacity-[0.24] rounded-none bg-gray"
       />
       <span
-        class="MuiSlider-track makeStyles-track"
+        class="base-Slider block absolute h-[1px] bg-blue"
         style="left: 0%; width: 4%;"
       />
-      <input
-        type="hidden"
-        value="4"
-      />
       <span
-        aria-orientation="horizontal"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="4"
-        class="MuiSlider-thumb makeStyles-thumb MuiSlider-thumbColorPrimary"
+        class="base-Slider group/thumb flex justify-center items-center w-[15px] h-[15px] rounded-[50%] bg-blue border-[2px] border-solid border-white -mt -ml outline-0 absolute transition-shadow cursor-pointer"
         data-index="0"
         role="slider"
         style="left: 4%;"
-        tabindex="0"
-      />
+      >
+        <input
+          aria-orientation="horizontal"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="4"
+          data-index="0"
+          max="100"
+          min="0"
+          step="1"
+          style="border: 0px; height: 100%; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 100%; direction: ltr;"
+          type="range"
+          value="4"
+        />
+        <span
+          class="absolute will-change transition-transform hidden top-[calc(100%+2px)] left-[calc(100%-13px)]"
+        >
+          <span
+            class="shadow-4 text-sm text-white bg-graphite m-1 rounded-sm py-[2px] px-2 max-w break-words"
+          >
+            4
+          </span>
+        </span>
+      </span>
     </span>
   </div>
 </div>

package/src/Slider/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-label-overlap'

package/src/Slider/hooks/use-label-overlap.ts

@@ -0,0 +1,48 @@
+import type { RefObject } from 'react'
+import { useCallback, useEffect, useState } from 'react'
+
+import { checkOverlap } from '../../utils'
+
+export const useLabelOverlap = ({ value }: { value?: number | number[] }) => {
+  const [isPartiallyOverlapped, setIsPartiallyOverlapped] = useState(false)
+  const [valueLabels, setValueLabels] = useState<RefObject<HTMLSpanElement>[]>(
+    []
+  )
+  const isRangeSlider = Array.isArray(value)
+
+  useEffect(() => {
+    if (!isRangeSlider) {
+      return
+    }
+    const isFullyOverlaped = value[0] === value[1]
+
+    if (isFullyOverlaped) {
+      setIsPartiallyOverlapped(false)
+    } else {
+      if (!(valueLabels[0]?.current && valueLabels[1]?.current)) {
+        return
+      }
+
+      setIsPartiallyOverlapped(
+        checkOverlap({
+          firstLabelRect: valueLabels[0].current.getBoundingClientRect(),
+          secondLabelRect: valueLabels[1].current.getBoundingClientRect(),
+          previousResult: isPartiallyOverlapped,
+        })
+      )
+    }
+  }, [value, isRangeSlider, isPartiallyOverlapped, valueLabels])
+
+  const handleValueLabelOnRender = useCallback(
+    (index: number, labelRef: RefObject<HTMLSpanElement>) => {
+      setValueLabels(valLabels => {
+        valLabels[index] = labelRef
+
+        return valLabels
+      })
+    },
+    [setValueLabels]
+  )
+
+  return { isPartiallyOverlapped, handleValueLabelOnRender }
+}

package/src/Slider/index.ts

@@ -3,5 +3,4 @@ import type { OmitInternalProps } from '@toptal/picasso-shared'
 import type { Props } from './Slider'
 
 export { default as Slider } from './Slider'
-export { useSliderContext } from './SliderContext'
 export type SliderProps = OmitInternalProps<Props>

package/src/Slider/story/ControlledWithLabel.example.tsx

@@ -14,7 +14,7 @@ const Example = () => {
       <Grid.Item sm={6}>
         <Grid alignItems='center'>
           <Grid.Item sm>
-            <Slider value={value} onChange={handleChange} max={100} compact />
+            <Slider value={value} onChange={handleChange} max={100} />
           </Grid.Item>
           <Grid.Item>
             <Typography size='medium'>{value}</Typography>

package/src/Slider/story/Marks.example.tsx

@@ -1,16 +1,25 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Container, Slider } from '@toptal/picasso'
 
 type Value = number | number[]
 
 const Example = () => {
-  const handleChange = (_: React.ChangeEvent<{}>, value: Value) => {
-    window.console.log('onChange: ', value)
+  const [value, setValue] = useState<Value>(10)
+  const handleChange = (_: React.ChangeEvent<{}>, val: Value) => {
+    window.console.log('onChange: ', val)
+    setValue(val)
   }
 
   return (
     <Container>
-      <Slider step={10} marks min={10} max={110} onChange={handleChange} />
+      <Slider
+        value={value}
+        step={10}
+        marks
+        min={10}
+        max={110}
+        onChange={handleChange}
+      />
     </Container>
   )
 }

package/src/Slider/story/Range.example.tsx

@@ -32,7 +32,6 @@ const Example = () => {
           onChange={handleChange}
           tooltip='on'
           tooltipFormat={renderLabel}
-          compact
         />
       </Container>
     </Container>

package/src/Slider/story/RangeWithValueLabel.example.tsx

@@ -36,7 +36,6 @@ const Example = () => {
             onChange={handleChange}
             tooltip='on'
             tooltipFormat={renderLabel}
-            compact
           />
         </Grid.Item>
         <Grid.Item sm={1}>