diff --git a/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx b/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx index e08d55cc084..e483012b768 100644 --- a/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx +++ b/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx @@ -14,12 +14,14 @@ export const percentToValue = ( min: number, max: number ) => { + // Deprecated, can be removed in v10 if (typeof min === 'string') { min = parseFloat(min) } if (typeof max === 'string') { max = parseFloat(max) } + return ((max - min) * percent) / 100 + min } @@ -56,8 +58,7 @@ export const getMousePosition = (event: MouseEvent & TouchEvent) => { export const calculatePercent = ( node: HTMLElement, event: MouseEvent | TouchEvent, - isVertical: boolean, - isReverted: boolean + isVertical: boolean ) => { const { width, height } = node.getBoundingClientRect() const { top, left } = getOffset(node) @@ -66,7 +67,7 @@ export const calculatePercent = ( const value = isVertical ? y - top : x - left const onePercent = (isVertical ? height : width) / 100 - return Math.abs((isReverted ? 100 : 0) - clamp(value / onePercent)) + return Math.abs(clamp(value / onePercent)) } export const clamp = (value: number, min = 0, max = 100) => diff --git a/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx b/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx index 14d395140ab..ad62afd8ae5 100644 --- a/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx +++ b/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx @@ -53,7 +53,6 @@ export function SliderInstance() { const mainParams = { className: classnames( 'dnb-slider', - isReverse && 'dnb-slider--reverse', isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', !showButtons && 'dnb-slider--no-buttons', @@ -137,7 +136,8 @@ function SliderSuffix() { } function SubtractButton() { - const { emitChange, value, attributes, allProps } = useSliderProps() + const { emitChange, value, isReverse, attributes, allProps } = + useSliderProps() const { step, min, @@ -149,7 +149,13 @@ function SubtractButton() { } = allProps const onSubtractClickHandler = (event: MouseEvent | TouchEvent) => { - emitChange(event, clamp((value as number) - (step || 1), min, max)) + let percent = clamp((value as number) - (step || 1), min, max) + + if (isReverse) { + percent = max - percent + } + + emitChange(event, percent) } const subtractParams = {} @@ -176,12 +182,19 @@ function SubtractButton() { } function AddButton() { - const { emitChange, value, attributes, allProps } = useSliderProps() + const { emitChange, value, isReverse, attributes, allProps } = + useSliderProps() const { step, min, max, disabled, skeleton, addTitle, numberFormat } = allProps const onAddClickHandler = (event: MouseEvent | TouchEvent) => { - emitChange(event, clamp((value as number) + (step || 1), min, max)) + let percent = clamp((value as number) + (step || 1), min, max) + + if (isReverse) { + percent = max - percent + } + + emitChange(event, percent) } const addParams = {} diff --git a/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx b/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx index 52094c6ee4d..f043027d625 100644 --- a/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx +++ b/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx @@ -151,6 +151,11 @@ export function SliderProvider(localProps: SliderProps) { } let numberValue = roundValue(rawValue, step) + + if (isReverse) { + numberValue = max - numberValue + } + let multiValues: ValueTypes = numberValue if (numberValue > -1) { diff --git a/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx b/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx index 0d389d7ba46..97e6cca22fe 100644 --- a/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx +++ b/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx @@ -14,6 +14,7 @@ export function SliderThumb() { values, thumbIndex, isVertical, + isReverse, showStatus, attributes, allProps, @@ -70,7 +71,11 @@ export function SliderThumb() { <> {values.map((value, i) => { const index = thumbIndex.current - const percent = clamp(((value - min) * 100) / (max - min)) + let percent = clamp(((value - min) * 100) / (max - min)) + + if (isReverse) { + percent = max - percent + } const style: React.CSSProperties = { zIndex: index === i ? 4 : 3, diff --git a/packages/dnb-eufemia/src/components/slider/SliderTrack.tsx b/packages/dnb-eufemia/src/components/slider/SliderTrack.tsx index 8825bddb1e5..4866c88bdd0 100644 --- a/packages/dnb-eufemia/src/components/slider/SliderTrack.tsx +++ b/packages/dnb-eufemia/src/components/slider/SliderTrack.tsx @@ -70,6 +70,7 @@ export function SliderTrackBefore() { const { values: origValues, isVertical, + isReverse, thumbIndex, allProps: { min, max }, } = useSliderProps() @@ -98,8 +99,8 @@ export function SliderTrackBefore() { ] const style: React.CSSProperties = {} - style[units[0]] = `${lowerPercent}%` - style[units[1]] = `${upperPercent}%` + style[units[isReverse ? 1 : 0]] = `${lowerPercent}%` + style[units[isReverse ? 0 : 1]] = `${upperPercent}%` return ( { - const percent = calculatePercent( - trackRef.current, - event, - isVertical, - isReverse - ) + const percent = calculatePercent(trackRef.current, event, isVertical) emitChange(event, percentToValue(percent, min, max)) setJumpedState() @@ -125,7 +119,7 @@ export function useSliderEvents() { } if (elem) { - const percent = calculatePercent(elem, event, isVertical, isReverse) + const percent = calculatePercent(elem, event, isVertical) emitChange(event, percentToValue(percent, min, max)) } } diff --git a/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx b/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx index 586df57640a..20ab3ce433e 100644 --- a/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx +++ b/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx @@ -7,14 +7,7 @@ import React from 'react' import { Wrapper, Box } from 'storybook-utils/helpers' import styled from '@emotion/styled' -import { - Slider, - ToggleButton, - Input, - FormRow, - FormLabel, - Tooltip, -} from '../../' +import { Slider, ToggleButton, Input, FormRow, FormLabel } from '../../' import '../../slider/style/dnb-range.scss' @@ -46,16 +39,21 @@ const FixedSizeWrapper = styled.div` export function MultiButtons() { const [value, setValue] = React.useState>([10, 40, 80]) + const [valueSecond, setValueSecond] = React.useState(80) return ( <> - - Tooltip - { @@ -67,7 +65,26 @@ export function MultiButtons() { - + { + console.log('onChange:', value, number) + setValueSecond(value as number) + }} + /> + {valueSecond} ) diff --git a/packages/dnb-eufemia/src/components/slider/style/_slider.scss b/packages/dnb-eufemia/src/components/slider/style/_slider.scss index ba6cb418712..bfac27c8efe 100644 --- a/packages/dnb-eufemia/src/components/slider/style/_slider.scss +++ b/packages/dnb-eufemia/src/components/slider/style/_slider.scss @@ -101,12 +101,6 @@ min-width: inherit; min-height: inherit; } - &--reverse &__track { - transform: scaleX(-1); - } - &--reverse#{&}--vertical &__track { - transform: scaleY(-1); - } &__line { position: absolute; @@ -180,7 +174,7 @@ line-height: var(--slider-button-size); transform: translateY(0.25rem); - z-index: 5; + z-index: 2; } &--vertical &__button.dnb-button--size-small { transform: translateX(0.25rem);