Update slider story

carmebar · Jan 10, 2022 · 16edc4d · 16edc4d
1 parent 27457cb
commit 16edc4d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 20 deletions.
diff --git a/src/react-components/input/Slider.js b/src/react-components/input/Slider.js
@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useImperativeHandle, useRef } from "react";
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef } from "react";
 import { useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
@@ -43,6 +43,13 @@ export const Slider = memo(
       }
     }));
 
+    useEffect(
+      () => {
+        updateValue(displayValue);
+      },
+      [updateValue, displayValue]
+    );
+
     return (
       <div className={classNames(styles.numberWithRange, className)}>
         <div className={classNames(styles.rangeSlider)} disabled={disabled}>

diff --git a/src/react-components/input/Slider.stories.js b/src/react-components/input/Slider.stories.js
@@ -16,24 +16,7 @@ const Template = args => (
 export const Base = Template.bind({});
 Base.argTypes = {
   onChange: { action: "changed" },
-  value: {
-    table: {
-      disable: true
-    }
-  }
-};
-Base.args = {
-  min: 0,
-  max: 8,
-  step: 1,
-  defaultValue: 4,
-  disabled: false
-};
-
-export const Controlled = Template.bind({});
-Controlled.argTypes = {
-  onChange: { action: "changed" },
-  value: {
+  defaultValue: {
     control: {
       type: "range",
       min: 0,
@@ -42,7 +25,7 @@ Controlled.argTypes = {
     }
   }
 };
-Controlled.args = {
+Base.args = {
   min: 0,
   max: 8,
   step: 1,