From 798e216c30aedc3026938e0fe85eb6debf18e229 Mon Sep 17 00:00:00 2001
From: Hiago Lucas Cardeal de Melo Silva <hcardealdemelo@gmail.com>
Date: Wed, 19 Apr 2023 19:42:36 -0300
Subject: [PATCH 1/2] Add resetOnMinMaxChange to the Slider component

---
 CHANGELOG.md                      |  4 +++
 react/components/Slider/README.md | 58 +++++++++++++++++++++++++++++--
 react/components/Slider/index.js  | 13 ++++---
 3 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a337dc2e..e98421fec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- `resetOnMinMaxChange` to the `Slider` component.
+
 ## [9.146.3] - 2022-09-08
 
 ### Fix
diff --git a/react/components/Slider/README.md b/react/components/Slider/README.md
index c237712f9..68c68beb8 100755
--- a/react/components/Slider/README.md
+++ b/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>
@@ -110,3 +114,53 @@ const handleSubmit = (e) => {
   />
 </>
 ```
+
+Dynamic min/max value
+
+```js
+const Button = require('../Button').default
+
+const [max, setMax] = React.useState(10)
+const defaultValues = [2, 8]
+
+const handleSubmit = e => {
+  e.preventDefault()
+
+  setMax(value => value + 10)
+}
+
+;<>
+  <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">
+    <code>resetOnMinMaxChange: true</code>
+    <Slider
+      min={0}
+      max={max}
+      alwaysShowCurrentValue={false}
+      range
+      defaultValues={defaultValues}
+    />
+  </div>
+
+  <div className="mt8">
+    <code>resetOnMinMaxChange: false</code>
+    <Slider
+      min={0}
+      max={max}
+      alwaysShowCurrentValue={false}
+      range
+      defaultValues={defaultValues}
+      resetOnMinMaxChange={false}
+    />
+  </div>
+</>
+```
diff --git a/react/components/Slider/index.js b/react/components/Slider/index.js
index a2993e4d3..d876184c8 100755
--- a/react/components/Slider/index.js
+++ b/react/components/Slider/index.js
@@ -64,18 +64,20 @@ export default class Slider extends Component {
   }
 
   componentDidUpdate(prevProps) {
+    const { resetOnMinMaxChange = true } = 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: resetOnMinMaxChange ? this.props.min : prev.values.left,
+            right: resetOnMinMaxChange ? this.props.max : prev.values.right,
           },
-        },
+        }),
         this.updateLayout
       )
     }
@@ -407,6 +409,7 @@ Slider.defaultProps = {
   formatValue: a => a,
   range: false,
   handleIcon: null,
+  resetOnMinMaxChange: true,
 }
 
 Slider.propTypes = {
@@ -432,4 +435,6 @@ Slider.propTypes = {
   handleIcon: PropTypes.node,
   /** Current value: [left, right] */
   values: PropTypes.arrayOf(PropTypes.number),
+  /** Whether the slider position should be reset when the min and max props change */
+  resetOnMinMaxChange: PropTypes.bool,
 }

From a691044eac113f6dc1e443aaf089e0902bb7a81d Mon Sep 17 00:00:00 2001
From: Hiago Lucas Cardeal de Melo Silva <hcardealdemelo@gmail.com>
Date: Thu, 20 Apr 2023 14:04:27 -0300
Subject: [PATCH 2/2] remove resetOnMinMaxChange and keep the
 resetOnMinMaxChange:false as the default behavior

---
 CHANGELOG.md                      |  4 +--
 react/components/Slider/README.md | 50 -------------------------------
 react/components/Slider/index.js  |  9 ++----
 react/playground/Playground.tsx   | 39 +++++++++++++++++++++++-
 4 files changed, 42 insertions(+), 60 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e98421fec..74dfe41d6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,9 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-### Added
+### Changed
 
-- `resetOnMinMaxChange` to the `Slider` component.
+- Prevents `Slider` range from resetting when the min/max value changes.
 
 ## [9.146.3] - 2022-09-08
 
diff --git a/react/components/Slider/README.md b/react/components/Slider/README.md
index 68c68beb8..41a4ef422 100755
--- a/react/components/Slider/README.md
+++ b/react/components/Slider/README.md
@@ -114,53 +114,3 @@ const handleSubmit = e => {
   />
 </>
 ```
-
-Dynamic min/max value
-
-```js
-const Button = require('../Button').default
-
-const [max, setMax] = React.useState(10)
-const defaultValues = [2, 8]
-
-const handleSubmit = e => {
-  e.preventDefault()
-
-  setMax(value => value + 10)
-}
-
-;<>
-  <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">
-    <code>resetOnMinMaxChange: true</code>
-    <Slider
-      min={0}
-      max={max}
-      alwaysShowCurrentValue={false}
-      range
-      defaultValues={defaultValues}
-    />
-  </div>
-
-  <div className="mt8">
-    <code>resetOnMinMaxChange: false</code>
-    <Slider
-      min={0}
-      max={max}
-      alwaysShowCurrentValue={false}
-      range
-      defaultValues={defaultValues}
-      resetOnMinMaxChange={false}
-    />
-  </div>
-</>
-```
diff --git a/react/components/Slider/index.js b/react/components/Slider/index.js
index d876184c8..1f699f2f5 100755
--- a/react/components/Slider/index.js
+++ b/react/components/Slider/index.js
@@ -64,8 +64,6 @@ export default class Slider extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { resetOnMinMaxChange = true } = prevProps
-
     if (prevProps.min !== this.props.min || prevProps.max !== this.props.max) {
       this.setState(
         prev => ({
@@ -74,8 +72,8 @@ export default class Slider extends Component {
             right: 0,
           },
           values: {
-            left: resetOnMinMaxChange ? this.props.min : prev.values.left,
-            right: resetOnMinMaxChange ? this.props.max : prev.values.right,
+            left: prev.values.left ?? this.props.min,
+            right: prev.values.right ?? this.props.max,
           },
         }),
         this.updateLayout
@@ -409,7 +407,6 @@ Slider.defaultProps = {
   formatValue: a => a,
   range: false,
   handleIcon: null,
-  resetOnMinMaxChange: true,
 }
 
 Slider.propTypes = {
@@ -435,6 +432,4 @@ Slider.propTypes = {
   handleIcon: PropTypes.node,
   /** Current value: [left, right] */
   values: PropTypes.arrayOf(PropTypes.number),
-  /** Whether the slider position should be reset when the min and max props change */
-  resetOnMinMaxChange: PropTypes.bool,
 }
diff --git a/react/playground/Playground.tsx b/react/playground/Playground.tsx
index 488e0393c..b79d2f5a7 100644
--- a/react/playground/Playground.tsx
+++ b/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>
 )