diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.md index bc83b5ca894..029fa08e741 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.md @@ -5,3 +5,7 @@ showTabs: true ## Description The Slider component provides a visual indication of adjustable value. A value can be adjusted (increased or decreased) by moving the drag handle along a track (usually horizontal or vertical). Remember to inform users that they can also adjust the value directly in the value input field (if it exists). + +### Define a `min` and `max` value + +Keep in mind, you should most probably define your `min` and `max` value, because they are tied closely to your given value property. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.md index ce98bccb72d..70a7bdcae9e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.md @@ -6,7 +6,7 @@ showTabs: true | Properties | Description | | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `value` | _(required)_ the `value` of the slider as a number. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multible thumbs). | +| `value` | _(required)_ the `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multible thumbs). | | `min` | _(optional)_ the minimum value. Defaults to `0`. | | `max` | _(optional)_ the maximum value. Defaults to `100` | | `step` | _(optional)_ the steps the slider takes on changing the value. Defaults to `null` | diff --git a/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx b/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx index 52094c6ee4d..c3b438be016 100644 --- a/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx +++ b/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx @@ -102,6 +102,8 @@ export function SliderProvider(localProps: SliderProps) { } = allProps const [value, setValue] = React.useState(_value) + const [externValue, updateExternValue] = + React.useState(_value) const realtimeValue = React.useRef(_value) const [thumbState, setThumbState] = React.useState('initial') @@ -215,14 +217,16 @@ export function SliderProvider(localProps: SliderProps) { React.useEffect(() => { if (isMulti) { const hasChanged = (_value as Array).some((val, i) => { - return val !== value[i] + return val !== externValue[i] }) if (hasChanged) { updateValue(_value) + updateExternValue(_value) } - } else { + } else if (_value !== externValue) { updateValue(_value) + updateExternValue(_value) } // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/Slider.test.tsx b/packages/dnb-eufemia/src/components/slider/__tests__/Slider.test.tsx index e47f6b9d86b..e764d070b96 100644 --- a/packages/dnb-eufemia/src/components/slider/__tests__/Slider.test.tsx +++ b/packages/dnb-eufemia/src/components/slider/__tests__/Slider.test.tsx @@ -245,6 +245,9 @@ describe('Slider component', () => { return } + const getThumbElements = (index: number) => + document.querySelectorAll('.dnb-slider__thumb')[index] as HTMLElement + const getRangeElement = (index: number) => document.querySelectorAll('[type="range"]')[ index @@ -266,6 +269,38 @@ describe('Slider component', () => { resetMouseSimulation() }) + it('will net need on external prop changes', () => { + const WrongUsage = () => { + const [min, setMinVal] = React.useState(0) //eslint-disable-line + const [max, setMaxVal] = React.useState(200) //eslint-disable-line + + return ( + { + setMinVal(value[0]) + setMaxVal(value[1]) + }} + /> + ) + } + + render() + + simulateMouseMove({ pageX: 20, width: 100, height: 10 }) + expect(getThumbElements(0).getAttribute('style')).toBe( + 'z-index: 4; left: 20%;' + ) + + simulateMouseMove({ pageX: 80, width: 100, height: 10 }) + expect(getThumbElements(1).getAttribute('style')).toBe( + 'z-index: 4; left: 80%;' + ) + + resetMouseSimulation() + }) + it('tracks mousemove on track', () => { const onChange = jest.fn() @@ -365,11 +400,6 @@ describe('Slider component', () => { /> ) - const getThumbElements = (index: number) => - document.querySelectorAll('.dnb-slider__thumb')[ - index - ] as HTMLElement - const secondThumb = document.querySelectorAll( '.dnb-slider__button-helper' )[1]