From acd4c1b95db90288b05b66165cd7c37365ee076a Mon Sep 17 00:00:00 2001
From: Navin Moorthy <navin007.a@gmail.com>
Date: Wed, 1 Dec 2021 12:21:35 +0530
Subject: [PATCH] =?UTF-8?q?refactor(slider):=20=E2=99=BB=EF=B8=8F=20update?=
 =?UTF-8?q?=20slider=20state=20handling=20for=20UI=20(#282)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/main.js                            |  2 +
 src/number-input/__keys.ts                    |  2 +-
 src/slider/SliderBaseState.ts                 | 43 ++---------------
 src/slider/SliderState.ts                     | 41 ++++------------
 src/slider/SliderThumbState.ts                | 35 +++++---------
 src/slider/__keys.ts                          | 47 +++++++++++--------
 src/slider/__tests__/Slider.test.tsx          | 33 ++++++++-----
 src/slider/__tests__/SliderAllInOne.test.tsx  | 40 +++++++---------
 .../stories/SliderAllInOne.component.tsx      | 36 +++++++-------
 src/slider/stories/SliderBasic.component.tsx  | 27 +++++++----
 src/slider/stories/SliderMulti.component.tsx  | 34 ++++++--------
 src/slider/stories/SliderRange.component.tsx  | 34 ++++++--------
 src/slider/stories/SliderSingle.component.tsx | 30 ++++++------
 .../stories/SliderSingleOrigin.component.tsx  | 29 ++++++------
 .../SliderSingleReversed.component.tsx        | 30 ++++++------
 .../SliderSingleVertical.component.tsx        | 19 +++++---
 16 files changed, 214 insertions(+), 268 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 5a2a70e0c..60db7f6fd 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,5 +1,7 @@
 module.exports = {
   core: { builder: "webpack5" },
+  framework: "@storybook/react",
+  features: { babelModeV7: true },
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "storybook-addon-preview",
diff --git a/src/number-input/__keys.ts b/src/number-input/__keys.ts
index 802f0d8bb..0201cdc0a 100644
--- a/src/number-input/__keys.ts
+++ b/src/number-input/__keys.ts
@@ -3,10 +3,10 @@ export const USE_NUMBERINPUT_STATE_KEYS = [
   "isDisabled",
   "isReadOnly",
   "value",
-  "step",
   "min",
   "max",
   "keepWithinRange",
+  "step",
   "precision",
   "isInvalid",
   "isRequired",
diff --git a/src/slider/SliderBaseState.ts b/src/slider/SliderBaseState.ts
index 3b4bd0952..6cbf6ec84 100644
--- a/src/slider/SliderBaseState.ts
+++ b/src/slider/SliderBaseState.ts
@@ -1,5 +1,6 @@
 import { useNumberFormatter } from "@react-aria/i18n";
 import { useSliderState } from "@react-stately/slider";
+import { SliderProps } from "@react-types/slider";
 
 export interface SliderBaseState {
   /**
@@ -17,9 +18,6 @@ export interface SliderBaseState {
    * @default 1
    */
   step: number;
-
-  /** Whether the whole Slider is disabled. */
-  isDisabled: boolean;
 }
 
 export interface SliderBaseAction {
@@ -120,35 +118,7 @@ export interface SliderBaseAction {
   setThumbEditable(index: number, editable: boolean): void;
 }
 
-export type SliderBaseInitialState = Partial<
-  Pick<SliderBaseState, "step" | "isDisabled">
-> & {
-  /** The current value (controlled). */
-  value?: number[];
-
-  /**
-   * The slider's minimum value.
-   * @default 0
-   */
-  minValue?: number;
-
-  /**
-   * The slider's maximum value.
-   * @default 100
-   */
-  maxValue?: number;
-
-  /** The default value (uncontrolled). */
-  defaultValue?: number[];
-
-  /** Handler that is called when the value changes. */
-  onChange?: (value: number[]) => void;
-
-  /**
-   * Get the value when dragging has ended.
-   */
-  onChangeEnd?: (value: number[]) => void;
-
+export type SliderBaseInitialState = SliderProps & {
   /**
    * The display format of the value label.
    */
@@ -160,13 +130,8 @@ export type SliderBaseStateReturn = SliderBaseState & SliderBaseAction;
 export function useSliderBaseState(
   props: SliderBaseInitialState = {},
 ): SliderBaseStateReturn {
-  const { isDisabled = false } = props;
-
   const numberFormatter = useNumberFormatter(props.formatOptions);
-  const state = useSliderState({ ...props, isDisabled, numberFormatter });
+  const state = useSliderState({ ...props, numberFormatter });
 
-  return {
-    ...state,
-    isDisabled,
-  };
+  return state;
 }
diff --git a/src/slider/SliderState.ts b/src/slider/SliderState.ts
index de5143009..34f409d35 100644
--- a/src/slider/SliderState.ts
+++ b/src/slider/SliderState.ts
@@ -2,11 +2,7 @@ import * as React from "react";
 import { useSlider } from "@react-aria/slider";
 import { AriaSliderProps } from "@react-types/slider";
 
-import {
-  SliderBaseInitialState,
-  SliderBaseStateReturn,
-  useSliderBaseState,
-} from "./index";
+import { SliderBaseStateReturn } from "./index";
 
 export type SliderState = {
   /**
@@ -17,17 +13,6 @@ export type SliderState = {
    */
   trackRef: React.RefObject<HTMLElement>;
 
-  /**
-   * Sliders BaseState.
-   */
-  baseState: SliderBaseStateReturn;
-
-  /**
-   * The orientation of the Slider.
-   * @default 'horizontal'
-   */
-  orientation: "horizontal" | "vertical";
-
   /** Props for the label element. */
   labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
 
@@ -41,24 +26,18 @@ export type SliderState = {
   outputProps: React.OutputHTMLAttributes<HTMLOutputElement>;
 };
 
-export type SliderAction = {};
+export type SliderActions = {};
 
-export type SliderInitialState = AriaSliderProps & SliderBaseInitialState & {};
+export type SliderStateReturn = SliderState & SliderActions & {};
 
-export type SliderStateReturn = SliderState & SliderAction & {};
+export type SliderInitialState = AriaSliderProps & {
+  state: SliderBaseStateReturn;
+};
 
-export function useSliderState(
-  props: SliderInitialState = {},
-): SliderStateReturn {
-  const { orientation = "horizontal" } = props;
-  const baseState = useSliderBaseState(props);
+export function useSliderState(props: SliderInitialState): SliderStateReturn {
+  const { state, ...rest } = props;
   const trackRef = React.useRef<HTMLElement>(null);
-  const sliderProps = useSlider({ ...props, orientation }, baseState, trackRef);
+  const sliderProps = useSlider(rest, state, trackRef);
 
-  return {
-    baseState,
-    orientation,
-    trackRef,
-    ...sliderProps,
-  };
+  return { ...sliderProps, trackRef };
 }
diff --git a/src/slider/SliderThumbState.ts b/src/slider/SliderThumbState.ts
index df5d230d2..5084900e8 100644
--- a/src/slider/SliderThumbState.ts
+++ b/src/slider/SliderThumbState.ts
@@ -2,15 +2,9 @@ import * as React from "react";
 import { useSliderThumb } from "@react-aria/slider";
 import { AriaSliderThumbProps } from "@react-types/slider";
 
-import { SliderStateReturn } from "./SliderState";
-import {} from ".";
+import { SliderBaseStateReturn } from "./SliderBaseState";
 
 export type SliderThumbState = {
-  /**
-   * Slider state, created via `useSliderState`.
-   */
-  sliderState: SliderStateReturn;
-
   /** A ref to the thumb input element. */
   inputRef: React.RefObject<HTMLInputElement>;
 
@@ -26,31 +20,28 @@ export type SliderThumbState = {
 
 export type SliderThumbActions = {};
 
-export type SliderThumbInitialState = Pick<SliderThumbState, "sliderState"> &
-  AriaSliderThumbProps & {};
-
 export type SliderThumbStateReturn = SliderThumbState & SliderThumbActions;
 
+export type SliderThumbInitialState = AriaSliderThumbProps & {
+  /** A ref to the track element. */
+  trackRef: React.RefObject<HTMLElement>;
+
+  state: SliderBaseStateReturn;
+};
+
 export function useSliderThumbState(
   props: SliderThumbInitialState,
 ): SliderThumbStateReturn {
-  const { sliderState, ...restProps } = props;
-  const { trackRef, baseState, orientation } = sliderState;
+  const { state, trackRef, ...thumbProps } = props;
   const inputRef = React.useRef<HTMLInputElement>(null);
   const sliderThumbProps = useSliderThumb(
     {
-      trackRef,
       inputRef,
-      isDisabled: baseState.isDisabled,
-      orientation,
-      ...restProps,
+      trackRef,
+      ...thumbProps,
     },
-    baseState,
+    state,
   );
 
-  return {
-    sliderState,
-    inputRef,
-    ...sliderThumbProps,
-  };
+  return { ...sliderThumbProps, inputRef };
 }
diff --git a/src/slider/__keys.ts b/src/slider/__keys.ts
index f1b77282d..1bd9417a1 100644
--- a/src/slider/__keys.ts
+++ b/src/slider/__keys.ts
@@ -1,20 +1,21 @@
 // Automatically generated
 export const USE_SLIDER_BASE_STATE_KEYS = [
+  "orientation",
   "isDisabled",
-  "step",
-  "value",
+  "onChangeEnd",
   "minValue",
   "maxValue",
+  "step",
+  "value",
   "defaultValue",
   "onChange",
-  "onChangeEnd",
+  "label",
   "formatOptions",
 ] as const;
 export const SLIDER_BASE_STATE_KEYS = [
   "values",
   "focusedThumb",
   "step",
-  "isDisabled",
   "getThumbValue",
   "setThumbValue",
   "setThumbPercent",
@@ -31,27 +32,38 @@ export const SLIDER_BASE_STATE_KEYS = [
   "isThumbEditable",
   "setThumbEditable",
 ] as const;
+export const SLIDER_STATE_KEYS = [
+  "trackRef",
+  "labelProps",
+  "groupProps",
+  "trackProps",
+  "outputProps",
+] as const;
 export const USE_SLIDER_STATE_KEYS = [
-  ...USE_SLIDER_BASE_STATE_KEYS,
   "orientation",
+  "isDisabled",
+  "onChangeEnd",
+  "minValue",
+  "maxValue",
+  "step",
+  "value",
+  "defaultValue",
+  "onChange",
   "label",
   "id",
   "aria-label",
   "aria-labelledby",
   "aria-describedby",
   "aria-details",
+  "state",
 ] as const;
-export const SLIDER_STATE_KEYS = [
-  "trackRef",
-  "baseState",
-  "orientation",
+export const SLIDER_THUMB_STATE_KEYS = [
+  "inputRef",
+  "thumbProps",
+  "inputProps",
   "labelProps",
-  "groupProps",
-  "trackProps",
-  "outputProps",
 ] as const;
 export const USE_SLIDER_THUMB_STATE_KEYS = [
-  "sliderState",
   "orientation",
   "isDisabled",
   "index",
@@ -71,13 +83,8 @@ export const USE_SLIDER_THUMB_STATE_KEYS = [
   "aria-describedby",
   "aria-details",
   "aria-errormessage",
-] as const;
-export const SLIDER_THUMB_STATE_KEYS = [
-  "sliderState",
-  "inputRef",
-  "thumbProps",
-  "inputProps",
-  "labelProps",
+  "trackRef",
+  "state",
 ] as const;
 export const SLIDER_GROUP_KEYS = [
   ...SLIDER_BASE_STATE_KEYS,
diff --git a/src/slider/__tests__/Slider.test.tsx b/src/slider/__tests__/Slider.test.tsx
index 682bd99c3..0c2c036aa 100644
--- a/src/slider/__tests__/Slider.test.tsx
+++ b/src/slider/__tests__/Slider.test.tsx
@@ -43,6 +43,7 @@ import { cleanup, screen } from "@testing-library/react";
 
 import { installMouseEvent } from "../../utils/test-utils";
 import {
+  SliderBaseInitialState,
   SliderGroup,
   SliderInput,
   SliderLabel,
@@ -50,17 +51,19 @@ import {
   SliderThumb,
   SliderThumbInitialState,
   SliderTrack,
+  useSliderBaseState,
   useSliderState,
   useSliderThumbState,
 } from "../index";
-import { SliderInitialState } from "../SliderState";
 
-export type SliderComponentProps = SliderInitialState & { origin?: number };
+export type SliderComponentProps = SliderBaseInitialState & { origin?: number };
 
 export const SliderComponent = (props: SliderComponentProps) => {
-  const state = useSliderState(props);
+  const label = "Minimal slider";
+  const state = useSliderBaseState(props);
+  const slider = useSliderState({ ...props, label: "Minimal slider", state });
   const originProp = props.origin ?? props.minValue ?? 0;
-  const { values, getValuePercent, getThumbValueLabel } = state.baseState;
+  const { values, getValuePercent, getThumbValueLabel } = state;
 
   const trackWidth = `${
     (getValuePercent(Math.max(values[0], originProp)) -
@@ -73,22 +76,22 @@ export const SliderComponent = (props: SliderComponentProps) => {
   const labelValue = getThumbValueLabel(0);
 
   return (
-    <SliderGroup className="chakra-slider-group">
+    <SliderGroup className="chakra-slider-group" {...slider}>
       <div className="slider-label">
-        <SliderLabel className="label" {...state}>
-          Minimal slider
+        <SliderLabel className="label" {...slider}>
+          {label}
         </SliderLabel>
         <SliderOutput
           data-testid="testid-slider-value"
           className="value"
-          {...state}
+          {...slider}
         >
           {labelValue}
         </SliderOutput>
       </div>
 
       <div className={`slider`}>
-        <SliderTrack {...state} className="slider-track-container">
+        <SliderTrack {...slider} className="slider-track-container">
           <div className="slider-track" />
           <div
             className="slider-filled-track"
@@ -99,7 +102,14 @@ export const SliderComponent = (props: SliderComponentProps) => {
           />
         </SliderTrack>
 
-        <Thumb index={0} sliderState={state} aria-label="Thumb" />
+        <Thumb
+          index={0}
+          orientation={props.orientation}
+          isDisabled={props.isDisabled}
+          trackRef={slider.trackRef}
+          state={state}
+          aria-label="Thumb"
+        />
       </div>
     </SliderGroup>
   );
@@ -109,8 +119,7 @@ export type SliderThumbProps = SliderThumbInitialState & {};
 
 export const Thumb: React.FC<SliderThumbProps> = props => {
   const sliderThumb = useSliderThumbState(props);
-  const { sliderState } = props;
-  const { getThumbPercent } = sliderState.baseState;
+  const { getThumbPercent } = props.state;
 
   return (
     <div
diff --git a/src/slider/__tests__/SliderAllInOne.test.tsx b/src/slider/__tests__/SliderAllInOne.test.tsx
index c4be7e761..9efa7d000 100644
--- a/src/slider/__tests__/SliderAllInOne.test.tsx
+++ b/src/slider/__tests__/SliderAllInOne.test.tsx
@@ -42,43 +42,37 @@ import { fireEvent, render } from "reakit-test-utils";
 import { cleanup, screen } from "@testing-library/react";
 
 import {
+  SliderBaseInitialState,
   SliderGroup,
-  SliderInitialState,
   SliderInput,
   SliderLabel,
   SliderOutput,
   SliderThumb,
   SliderThumbInitialState,
   SliderTrack,
+  useSliderBaseState,
   useSliderState,
   useSliderThumbState,
 } from "../../index";
 import { installMouseEvent } from "../../utils/test-utils";
 
-export type SliderAllInOneProps = SliderInitialState & {
-  /**
-   * Label for the slider
-   *
-   * @default Styled
-   */
-  label?: string;
-
+export type SliderAllInOneProps = SliderBaseInitialState & {
   /**
    * Origin on the slider, calculated based on min & max
    */
   origin?: number;
 };
 
-export const SliderAllInOne: React.FC<SliderAllInOneProps> = args => {
-  const { label, origin: originProp, ...rest } = args;
-  const origin = originProp ?? args.minValue ?? 0;
-
-  const slider = useSliderState(rest);
-  const { baseState, orientation } = slider;
+export const SliderAllInOne: React.FC<SliderAllInOneProps> = props => {
+  const { label, origin: originProp, ...rest } = props;
+  const origin = originProp ?? props.minValue ?? 0;
+  const sliderLabel = `${label ? label : "Styled"} Slider`;
+  const state = useSliderBaseState(props);
+  const slider = useSliderState({ ...rest, label: sliderLabel, state });
   const { getThumbValueLabel, getThumbPercent, getValuePercent, values } =
-    baseState;
+    state;
 
-  const isVertical = orientation === "vertical";
+  const isVertical = props.orientation === "vertical";
   const isRange = values.length === 2;
   const isMulti = values.length > 2;
 
@@ -100,7 +94,7 @@ export const SliderAllInOne: React.FC<SliderAllInOneProps> = args => {
     <SliderGroup className="chakra-slider-group" {...slider}>
       <div className="slider-label">
         <SliderLabel className="label" {...slider}>
-          {`${label ? label : "Styled"} Slider`}
+          {sliderLabel}
         </SliderLabel>
         <SliderOutput
           className="value"
@@ -132,7 +126,10 @@ export const SliderAllInOne: React.FC<SliderAllInOneProps> = args => {
           <Thumb
             index={index}
             key={`thumb-${index}`}
-            sliderState={slider}
+            state={state}
+            orientation={props.orientation}
+            isDisabled={props.isDisabled}
+            trackRef={slider.trackRef}
             aria-label={`Thumb-${index}`}
           />
         ))}
@@ -146,9 +143,8 @@ export default SliderAllInOne;
 export type SliderThumbProps = SliderThumbInitialState & {};
 export const Thumb: React.FC<SliderThumbProps> = props => {
   const sliderThumb = useSliderThumbState(props);
-  const { index, sliderState } = props;
-  const { orientation, baseState } = sliderState;
-  const { getThumbPercent } = baseState;
+  const { index, orientation } = props;
+  const { getThumbPercent } = props.state;
 
   const isVertical = orientation === "vertical";
 
diff --git a/src/slider/stories/SliderAllInOne.component.tsx b/src/slider/stories/SliderAllInOne.component.tsx
index 60e7f1efd..2256b85cd 100644
--- a/src/slider/stories/SliderAllInOne.component.tsx
+++ b/src/slider/stories/SliderAllInOne.component.tsx
@@ -2,26 +2,20 @@ import * as React from "react";
 import { VisuallyHidden } from "reakit";
 
 import {
+  SliderBaseInitialState,
   SliderGroup,
-  SliderInitialState,
   SliderInput,
   SliderLabel,
   SliderOutput,
   SliderThumb,
   SliderThumbInitialState,
   SliderTrack,
+  useSliderBaseState,
   useSliderState,
   useSliderThumbState,
 } from "../../index";
 
-export type SliderAllInOneProps = SliderInitialState & {
-  /**
-   * Label for the slider
-   *
-   * @default Styled
-   */
-  label?: string;
-
+export type SliderAllInOneProps = SliderBaseInitialState & {
   /**
    * Origin on the slider, calculated based on min & max
    */
@@ -33,16 +27,16 @@ export type SliderAllInOneProps = SliderInitialState & {
   showTip?: boolean;
 };
 
-export const SliderAllInOne: React.FC<SliderAllInOneProps> = args => {
-  const { label, origin: originProp, showTip, ...rest } = args;
+export const SliderAllInOne: React.FC<SliderAllInOneProps> = props => {
+  const { label, origin: originProp, showTip, ...rest } = props;
   const sliderLabel = `${label ? label : "Styled"} Slider`;
-  const origin = originProp ?? args.minValue ?? 0;
-  const slider = useSliderState({ ...rest, label: sliderLabel });
-  const { baseState, orientation } = slider;
+  const origin = originProp ?? props.minValue ?? 0;
+  const state = useSliderBaseState(props);
+  const slider = useSliderState({ ...rest, label: sliderLabel, state });
   const { getThumbValueLabel, getThumbPercent, getValuePercent, values } =
-    baseState;
+    state;
 
-  const isVertical = orientation === "vertical";
+  const isVertical = props.orientation === "vertical";
   const isRange = values.length === 2;
   const isMulti = values.length > 2;
 
@@ -93,7 +87,10 @@ export const SliderAllInOne: React.FC<SliderAllInOneProps> = args => {
             index={index}
             key={`thumb-${index}`}
             aria-label={`Thumb-${index}`}
-            sliderState={slider}
+            state={state}
+            orientation={props.orientation}
+            isDisabled={props.isDisabled}
+            trackRef={slider.trackRef}
             showTip={showTip}
           />
         ))}
@@ -109,9 +106,8 @@ export type SliderThumbProps = SliderThumbInitialState &
 
 export const Thumb: React.FC<SliderThumbProps> = props => {
   const sliderThumb = useSliderThumbState(props);
-  const { index, showTip, sliderState } = props;
-  const { orientation, baseState } = sliderState;
-  const { getThumbValueLabel, getThumbPercent } = baseState;
+  const { index, orientation, showTip } = props;
+  const { getThumbPercent, getThumbValueLabel } = props.state;
 
   const isVertical = orientation === "vertical";
 
diff --git a/src/slider/stories/SliderBasic.component.tsx b/src/slider/stories/SliderBasic.component.tsx
index b8326bdb7..a29389d1c 100644
--- a/src/slider/stories/SliderBasic.component.tsx
+++ b/src/slider/stories/SliderBasic.component.tsx
@@ -2,23 +2,25 @@ import * as React from "react";
 import { VisuallyHidden } from "reakit";
 
 import {
+  SliderBaseInitialState,
   SliderGroup,
-  SliderInitialState,
   SliderInput,
   SliderThumb,
   SliderThumbInitialState,
   SliderTrack,
+  useSliderBaseState,
   useSliderState,
   useSliderThumbState,
 } from "../../index";
 
-export type SliderBasicProps = SliderInitialState & {};
+export type SliderBasicProps = SliderBaseInitialState & {};
 
-export const SliderBasic: React.FC<SliderBasicProps> = args => {
-  const { label, ...rest } = args;
+export const SliderBasic: React.FC<SliderBasicProps> = props => {
+  const { label } = props;
   const sliderLabel = `${label ? label : "Styled"} Slider`;
-  const slider = useSliderState({ ...rest, "aria-label": sliderLabel });
-  const { getValuePercent, values } = slider.baseState;
+  const state = useSliderBaseState(props);
+  const slider = useSliderState({ ...props, "aria-label": sliderLabel, state });
+  const { getValuePercent, values } = state;
 
   return (
     <SliderGroup className="chakra-slider-group" {...slider}>
@@ -31,7 +33,14 @@ export const SliderBasic: React.FC<SliderBasicProps> = args => {
           />
         </SliderTrack>
 
-        <Thumb index={0} sliderState={slider} aria-label="Thumb" />
+        <Thumb
+          index={0}
+          state={state}
+          orientation={props.orientation}
+          isDisabled={props.isDisabled}
+          trackRef={slider.trackRef}
+          aria-label="Thumb"
+        />
       </div>
     </SliderGroup>
   );
@@ -43,8 +52,8 @@ export type SliderThumbProps = SliderThumbInitialState & {};
 
 export const Thumb: React.FC<SliderThumbProps> = props => {
   const sliderThumb = useSliderThumbState(props);
-  const { index, sliderState } = props;
-  const { getThumbPercent, getThumbValueLabel } = sliderState.baseState;
+  const { index } = props;
+  const { getThumbPercent, getThumbValueLabel } = props.state;
 
   return (
     <div
diff --git a/src/slider/stories/SliderMulti.component.tsx b/src/slider/stories/SliderMulti.component.tsx
index 35686c273..867e2a777 100644
--- a/src/slider/stories/SliderMulti.component.tsx
+++ b/src/slider/stories/SliderMulti.component.tsx
@@ -2,40 +2,34 @@ import * as React from "react";
 import { VisuallyHidden } from "reakit";
 
 import {
+  SliderBaseInitialState,
   SliderGroup,
-  SliderInitialState,
   SliderInput,
   SliderLabel,
   SliderOutput,
   SliderThumb,
   SliderThumbInitialState,
   SliderTrack,
+  useSliderBaseState,
   useSliderState,
   useSliderThumbState,
 } from "../../index";
 
-export type SliderMultiProps = SliderInitialState & {
-  /**
-   * Label for the slider
-   *
-   * @default Styled
-   */
-  label?: string;
-
+export type SliderMultiProps = SliderBaseInitialState & {
   /**
    * True, if thumb needs a tip to show it's current percent
    */
   showTip?: boolean;
 };
 
-export const SliderMulti: React.FC<SliderMultiProps> = args => {
-  const { label, showTip, ...rest } = args;
+export const SliderMulti: React.FC<SliderMultiProps> = props => {
+  const { label, showTip, ...rest } = props;
   const sliderLabel = `${label ? label : "Styled"} Slider`;
-  const slider = useSliderState({ ...rest, label: sliderLabel });
-  const { baseState, orientation } = slider;
-  const { values } = baseState;
+  const state = useSliderBaseState(props);
+  const slider = useSliderState({ ...rest, label: sliderLabel, state });
+  const { values } = state;
 
-  const isVertical = orientation === "vertical";
+  const isVertical = props.orientation === "vertical";
 
   return (
     <SliderGroup className="chakra-slider-group" {...slider}>
@@ -58,7 +52,10 @@ export const SliderMulti: React.FC<SliderMultiProps> = args => {
             index={index}
             key={`thumb-${index}`}
             aria-label={`Thumb-${index}`}
-            sliderState={slider}
+            orientation={props.orientation}
+            isDisabled={props.isDisabled}
+            trackRef={slider.trackRef}
+            state={state}
             showTip={showTip}
           />
         ))}
@@ -74,9 +71,8 @@ export type SliderThumbProps = SliderThumbInitialState &
 
 export const Thumb: React.FC<SliderThumbProps> = props => {
   const sliderThumb = useSliderThumbState(props);
-  const { index, showTip, sliderState } = props;
-  const { orientation, baseState } = sliderState;
-  const { getThumbValueLabel, getThumbPercent } = baseState;
+  const { index, showTip, state, orientation } = props;
+  const { getThumbValueLabel, getThumbPercent } = state;
 
   const isVertical = orientation === "vertical";
 
diff --git a/src/slider/stories/SliderRange.component.tsx b/src/slider/stories/SliderRange.component.tsx
index fd09638b5..41b7f39a9 100644
--- a/src/slider/stories/SliderRange.component.tsx
+++ b/src/slider/stories/SliderRange.component.tsx
@@ -2,40 +2,34 @@ import * as React from "react";
 import { VisuallyHidden } from "reakit";
 
 import {
+  SliderBaseInitialState,
   SliderGroup,
-  SliderInitialState,
   SliderInput,
   SliderLabel,
   SliderOutput,
   SliderThumb,
   SliderThumbInitialState,
   SliderTrack,
+  useSliderBaseState,
   useSliderState,
   useSliderThumbState,
 } from "../../index";
 
-export type SliderRangeProps = SliderInitialState & {
-  /**
-   * Label for the slider
-   *
-   * @default Styled
-   */
-  label?: string;
-
+export type SliderRangeProps = SliderBaseInitialState & {
   /**
    * True, if thumb needs a tip to show it's current percent
    */
   showTip?: boolean;
 };
 
-export const SliderRange: React.FC<SliderRangeProps> = args => {
-  const { label, showTip, ...rest } = args;
+export const SliderRange: React.FC<SliderRangeProps> = props => {
+  const { label, showTip, ...rest } = props;
   const sliderLabel = `${label ? label : "Styled"} Slider`;
-  const slider = useSliderState({ ...rest, label: sliderLabel });
-  const { baseState, orientation } = slider;
-  const { getThumbValueLabel, getThumbPercent, values } = baseState;
+  const state = useSliderBaseState(props);
+  const slider = useSliderState({ ...rest, label: sliderLabel, state });
+  const { getThumbValueLabel, getThumbPercent, values } = state;
 
-  const isVertical = orientation === "vertical";
+  const isVertical = props.orientation === "vertical";
   const isRange = values.length === 2;
 
   const labelValue = `${getThumbValueLabel(0)} to ${getThumbValueLabel(1)}`;
@@ -73,7 +67,10 @@ export const SliderRange: React.FC<SliderRangeProps> = args => {
             index={index}
             key={`thumb-${index}`}
             aria-label={`Thumb-${index}`}
-            sliderState={slider}
+            state={state}
+            orientation={props.orientation}
+            isDisabled={props.isDisabled}
+            trackRef={slider.trackRef}
             showTip={showTip}
           />
         ))}
@@ -89,9 +86,8 @@ export type SliderThumbProps = SliderThumbInitialState &
 
 export const Thumb: React.FC<SliderThumbProps> = props => {
   const sliderThumb = useSliderThumbState(props);
-  const { index, showTip, sliderState } = props;
-  const { orientation, baseState } = sliderState;
-  const { getThumbValueLabel, getThumbPercent } = baseState;
+  const { index, showTip, state, orientation } = props;
+  const { getThumbValueLabel, getThumbPercent } = state;
 
   const isVertical = orientation === "vertical";
 
diff --git a/src/slider/stories/SliderSingle.component.tsx b/src/slider/stories/SliderSingle.component.tsx
index 98f155769..86b9804b5 100644
--- a/src/slider/stories/SliderSingle.component.tsx
+++ b/src/slider/stories/SliderSingle.component.tsx
@@ -2,37 +2,32 @@ import * as React from "react";
 import { VisuallyHidden } from "reakit";
 
 import {
+  SliderBaseInitialState,
   SliderGroup,
-  SliderInitialState,
   SliderInput,
   SliderLabel,
   SliderOutput,
   SliderThumb,
   SliderThumbInitialState,
   SliderTrack,
+  useSliderBaseState,
   useSliderState,
   useSliderThumbState,
 } from "../../index";
 
-export type SliderSingleProps = SliderInitialState & {
-  /**
-   * Label for the slider
-   *
-   * @default Styled
-   */
-  label?: string;
-
+export type SliderSingleProps = SliderBaseInitialState & {
   /**
    * True, if thumb needs a tip to show it's current percent
    */
   showTip?: boolean;
 };
 
-export const SliderSingle: React.FC<SliderSingleProps> = args => {
-  const { label, showTip, ...rest } = args;
+export const SliderSingle: React.FC<SliderSingleProps> = props => {
+  const { label, showTip, ...rest } = props;
   const sliderLabel = `${label ? label : "Styled"} Slider`;
-  const slider = useSliderState({ ...rest, label: sliderLabel });
-  const { getThumbValueLabel, getValuePercent, values } = slider.baseState;
+  const state = useSliderBaseState(props);
+  const slider = useSliderState({ ...rest, label: sliderLabel, state });
+  const { getThumbValueLabel, getValuePercent, values } = state;
 
   return (
     <SliderGroup className="chakra-slider-group" {...slider}>
@@ -56,7 +51,10 @@ export const SliderSingle: React.FC<SliderSingleProps> = args => {
 
         <Thumb
           index={0}
-          sliderState={slider}
+          state={state}
+          orientation={props.orientation}
+          isDisabled={props.isDisabled}
+          trackRef={slider.trackRef}
           showTip={showTip}
           aria-label="Thumb"
         />
@@ -72,8 +70,8 @@ export type SliderThumbProps = SliderThumbInitialState &
 
 export const Thumb: React.FC<SliderThumbProps> = props => {
   const sliderThumb = useSliderThumbState(props);
-  const { index, showTip, sliderState } = props;
-  const { getThumbValueLabel, getThumbPercent } = sliderState.baseState;
+  const { index, showTip, state } = props;
+  const { getThumbValueLabel, getThumbPercent } = state;
 
   return (
     <div
diff --git a/src/slider/stories/SliderSingleOrigin.component.tsx b/src/slider/stories/SliderSingleOrigin.component.tsx
index f0d3cb708..bacc67fc5 100644
--- a/src/slider/stories/SliderSingleOrigin.component.tsx
+++ b/src/slider/stories/SliderSingleOrigin.component.tsx
@@ -2,36 +2,32 @@ import * as React from "react";
 import { VisuallyHidden } from "reakit";
 
 import {
+  SliderBaseInitialState,
   SliderGroup,
-  SliderInitialState,
   SliderInput,
   SliderLabel,
   SliderOutput,
   SliderThumb,
   SliderThumbInitialState,
   SliderTrack,
+  useSliderBaseState,
   useSliderState,
   useSliderThumbState,
 } from "../../index";
 
-interface SliderSingleOriginProps extends SliderInitialState {
-  /**
-   * Label for the slider
-   *
-   * @default Styled
-   */
-  label?: string;
+interface SliderSingleOriginProps extends SliderBaseInitialState {
   /**
    * True, if thumb needs a tip to show it's current percent
    */
   showTip?: boolean;
 }
 
-export const SliderSingleOrigin: React.FC<SliderSingleOriginProps> = args => {
-  const { label, showTip, ...rest } = args;
+export const SliderSingleOrigin: React.FC<SliderSingleOriginProps> = props => {
+  const { label, showTip, ...rest } = props;
   const sliderLabel = `${label ? label : "Styled"} Slider`;
-  const slider = useSliderState({ ...rest, label: sliderLabel });
-  const { getThumbValueLabel, getValuePercent, values } = slider.baseState;
+  const state = useSliderBaseState(props);
+  const slider = useSliderState({ ...rest, label: sliderLabel, state });
+  const { getThumbValueLabel, getValuePercent, values } = state;
 
   const origin = 0;
 
@@ -64,7 +60,10 @@ export const SliderSingleOrigin: React.FC<SliderSingleOriginProps> = args => {
 
         <Thumb
           index={0}
-          sliderState={slider}
+          state={state}
+          orientation={props.orientation}
+          isDisabled={props.isDisabled}
+          trackRef={slider.trackRef}
           showTip={showTip}
           aria-label="Thumb"
         />
@@ -80,8 +79,8 @@ export type SliderThumbProps = SliderThumbInitialState &
 
 export const Thumb: React.FC<SliderThumbProps> = props => {
   const sliderThumb = useSliderThumbState(props);
-  const { index, showTip, sliderState } = props;
-  const { getThumbValueLabel, getThumbPercent } = sliderState.baseState;
+  const { index, showTip, state } = props;
+  const { getThumbValueLabel, getThumbPercent } = state;
 
   return (
     <div
diff --git a/src/slider/stories/SliderSingleReversed.component.tsx b/src/slider/stories/SliderSingleReversed.component.tsx
index 1bdc096cd..85ffd4ddc 100644
--- a/src/slider/stories/SliderSingleReversed.component.tsx
+++ b/src/slider/stories/SliderSingleReversed.component.tsx
@@ -3,26 +3,20 @@ import { VisuallyHidden } from "reakit";
 import { I18nProvider } from "@react-aria/i18n";
 
 import {
+  SliderBaseInitialState,
   SliderGroup,
-  SliderInitialState,
   SliderInput,
   SliderLabel,
   SliderOutput,
   SliderThumb,
   SliderThumbInitialState,
   SliderTrack,
+  useSliderBaseState,
   useSliderState,
   useSliderThumbState,
 } from "../../index";
 
-export type SliderSingleReversedProps = SliderInitialState & {
-  /**
-   * Label for the slider
-   *
-   * @default Styled
-   */
-  label?: string;
-
+export type SliderSingleReversedProps = SliderBaseInitialState & {
   /**
    * True, if thumb needs a tip to show it's current percent
    */
@@ -41,11 +35,12 @@ export const SliderSingleReversed: React.FC<
 
 export default SliderSingleReversed;
 
-export const Slider: React.FC<SliderSingleReversedProps> = args => {
-  const { label, showTip, ...rest } = args;
+export const Slider: React.FC<SliderSingleReversedProps> = props => {
+  const { label, showTip, ...rest } = props;
   const sliderLabel = `${label ? label : "Styled"} Slider`;
-  const slider = useSliderState({ ...rest, label: sliderLabel });
-  const { getThumbValue, getValuePercent, values } = slider.baseState;
+  const state = useSliderBaseState(props);
+  const slider = useSliderState({ ...rest, label: sliderLabel, state });
+  const { getThumbValue, getValuePercent, values } = state;
 
   return (
     <SliderGroup className="chakra-slider-group" {...slider}>
@@ -72,7 +67,10 @@ export const Slider: React.FC<SliderSingleReversedProps> = args => {
 
         <Thumb
           index={0}
-          sliderState={slider}
+          state={state}
+          orientation={props.orientation}
+          isDisabled={props.isDisabled}
+          trackRef={slider.trackRef}
           aria-label="Thumb"
           showTip={showTip}
         />
@@ -86,8 +84,8 @@ export type SliderThumbProps = SliderThumbInitialState &
 
 export const Thumb: React.FC<SliderThumbProps> = props => {
   const sliderThumb = useSliderThumbState(props);
-  const { index, showTip, sliderState } = props;
-  const { getThumbValueLabel, getThumbPercent } = sliderState.baseState;
+  const { index, showTip, state } = props;
+  const { getThumbValueLabel, getThumbPercent } = state;
 
   return (
     <div
diff --git a/src/slider/stories/SliderSingleVertical.component.tsx b/src/slider/stories/SliderSingleVertical.component.tsx
index 7f9d270cb..dc984af4c 100644
--- a/src/slider/stories/SliderSingleVertical.component.tsx
+++ b/src/slider/stories/SliderSingleVertical.component.tsx
@@ -10,6 +10,7 @@ import {
   SliderThumb,
   SliderThumbInitialState,
   SliderTrack,
+  useSliderBaseState,
   useSliderState,
   useSliderThumbState,
 } from "../../index";
@@ -30,11 +31,12 @@ export type SliderSingleVerticalProps = SliderInitialState & {
 
 export const SliderSingleVertical: React.FC<
   SliderSingleVerticalProps
-> = args => {
-  const { label, showTip, ...rest } = args;
+> = props => {
+  const { label, showTip, ...rest } = props;
   const sliderLabel = `${label ? label : "Styled"} Slider`;
-  const slider = useSliderState({ ...rest, label: sliderLabel });
-  const { getThumbValueLabel, getValuePercent, values } = slider.baseState;
+  const state = useSliderBaseState(props);
+  const slider = useSliderState({ ...rest, label: sliderLabel, state });
+  const { getThumbValueLabel, getValuePercent, values } = state;
 
   return (
     <SliderGroup className="chakra-slider-group" {...slider}>
@@ -58,7 +60,10 @@ export const SliderSingleVertical: React.FC<
 
         <Thumb
           index={0}
-          sliderState={slider}
+          state={state}
+          orientation={props.orientation}
+          isDisabled={props.isDisabled}
+          trackRef={slider.trackRef}
           aria-label="Thumb"
           showTip={showTip}
         />
@@ -74,8 +79,8 @@ export type SliderThumbProps = SliderThumbInitialState &
 
 export const Thumb: React.FC<SliderThumbProps> = props => {
   const sliderThumb = useSliderThumbState(props);
-  const { index, showTip, sliderState } = props;
-  const { getThumbValueLabel, getThumbPercent } = sliderState.baseState;
+  const { index, showTip, state } = props;
+  const { getThumbValueLabel, getThumbPercent } = state;
 
   return (
     <div