Merge pull request #1438 from vtex/feature/slider-dynamic-min-max-support

Add resetOnMinMaxChange to the Slider component

Author: danzanzini

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Prevents `Slider` range from resetting when the min/max value changes.
+
 ## [9.146.3] - 2022-09-08
 
 ### Fix

react/components/Slider/README.md

@@ -48,7 +48,7 @@ const handleInputChange = event => {
   }
 }
 
-const handleSubmit = (e) => {
+const handleSubmit = e => {
   e.preventDefault()
 
   const { left: leftValueInput, right: rightValueInput } = inputValues
@@ -89,7 +89,11 @@ const handleSubmit = (e) => {
         value={inputValues.right}
       />
     </div>
-    <Button type="submit" onClick={handleSubmit} variation="primary" size="small">
+    <Button
+      type="submit"
+      onClick={handleSubmit}
+      variation="primary"
+      size="small">
       Submit
     </Button>
   </form>

react/components/Slider/index.js

@@ -66,16 +66,16 @@ export default class Slider extends Component {
   componentDidUpdate(prevProps) {
     if (prevProps.min !== this.props.min || prevProps.max !== this.props.max) {
       this.setState(
-        {
+        prev => ({
           translate: {
             left: 0,
             right: 0,
           },
           values: {
-            left: this.props.min,
-            right: this.props.max,
+            left: prev.values.left ?? this.props.min,
+            right: prev.values.right ?? this.props.max,
           },
-        },
+        }),
         this.updateLayout
       )
     }

react/playground/Playground.tsx

@@ -2,10 +2,47 @@ import React from 'react'
 
 import PageHeader from '../PageHeader'
 import Layout from '../Layout'
+import Button from '../Button'
+import Slider from '../Slider'
+
+const SliderTest = () => {
+  const [max, setMax] = React.useState(10)
+  const defaultValues = [2, 8]
+
+  const handleSubmit = e => {
+    e.preventDefault()
+
+    setMax(value => value + 10)
+  }
+
+  return (
+    <>
+      <form className="flex items-end mb5">
+        <Button
+          type="Increase max value +10"
+          onClick={handleSubmit}
+          variation="primary"
+          size="small">
+          Increase max value +10
+        </Button>
+      </form>
+
+      <div className="mt8">
+        <Slider
+          min={0}
+          max={max}
+          alwaysShowCurrentValue={false}
+          range
+          defaultValues={defaultValues}
+        />
+      </div>
+    </>
+  )
+}
 
 const Playground = () => (
   <Layout fullWidth pageHeader={<PageHeader title="Playground" />}>
-    {/* Add your code here, don't forget to delete after */}
+    <SliderTest />
   </Layout>
 )