diff --git a/CHANGELOG.md b/CHANGELOG.md index 1a337dc2e..74dfe41d6 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] +### Changed + +- Prevents `Slider` range from resetting when the min/max value changes. + ## [9.146.3] - 2022-09-08 ### Fix diff --git a/react/components/Slider/README.md b/react/components/Slider/README.md index c237712f9..41a4ef422 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} /> - diff --git a/react/components/Slider/index.js b/react/components/Slider/index.js index a2993e4d3..1f699f2f5 100755 --- a/react/components/Slider/index.js +++ b/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 ) } 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 ( + <> +
+ +
+ +
+ +
+ + ) +} const Playground = () => ( }> - {/* Add your code here, don't forget to delete after */} + )