@dnb/eufemia 9.29.0 → 9.31.0

package/es/components/slider/SliderHelpers.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import { format } from '../number-format/NumberUtils';
-export const percentToValue = (percent, min, max) => {
+export const percentToValue = (percent, min, max, isReverse) => {
   if (typeof min === 'string') {
     min = parseFloat(min);
   }
@@ -15,7 +15,13 @@ export const percentToValue = (percent, min, max) => {
     max = parseFloat(max);
   }
 
-  return (max - min) * percent / 100 + min;
+  let num = (max - min) * percent / 100 + min;
+
+  if (isReverse) {
+    num = max + min - num;
+  }
+
+  return num;
 };
 export const roundToStep = (number, step) => Math.round(number / step) * step;
 export const getOffset = node => {
@@ -48,7 +54,7 @@ export const getMousePosition = event => {
     y: event.pageY
   };
 };
-export const calculatePercent = (node, event, isVertical, isReverted) => {
+export const calculatePercent = (node, event, isVertical) => {
   const {
     width,
     height
@@ -63,7 +69,7 @@ export const calculatePercent = (node, event, isVertical, isReverted) => {
   } = getMousePosition(event);
   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, min = 0, max = 100) => Math.min(Math.max(value, min), max);
 export const roundValue = (value, step) => {
@@ -104,21 +110,23 @@ export const closestIndex = (goal, array) => {
   const res = [...array].sort((a, b) => Math.abs(goal - a) - Math.abs(goal - b))[0];
   return array.findIndex(num => num === res);
 };
-export const formatNumber = (value, opts = null) => {
-  if (opts) {
-    return format(value, opts);
+export const getFormattedNumber = (value, numberFormat) => {
+  if (numberFormat) {
+    if (typeof numberFormat === 'function') {
+      const number = numberFormat(value);
+      return {
+        number,
+        aria: number
+      };
+    }
+
+    return format(value, _objectSpread(_objectSpread({}, numberFormat || {}), {}, {
+      returnAria: true
+    }));
   }
 
-  return value;
-};
-export const getHumanNumber = (value, numberFormat) => {
-  const num = value;
-  const {
-    aria: humanNumber
-  } = numberFormat ? formatNumber(num, _objectSpread(_objectSpread({}, numberFormat || {}), {}, {
-    returnAria: true
-  })) : {
-    aria: null
+  return {
+    aria: null,
+    number: null
   };
-  return String(humanNumber || value);
 };

package/es/components/slider/SliderInstance.js

@@ -13,10 +13,10 @@ import Suffix from '../../shared/helpers/Suffix';
 import Button from '../button/Button';
 import FormLabel from '../form-label/FormLabel';
 import FormStatus from '../form-status/FormStatus';
-import { SliderMainTrack, SliderTrackAfter, SliderTrackBefore } from './SliderTrack';
+import { SliderMainTrack, SliderTrackBefore, SliderTrackAfter } from './SliderTrack';
 import { SliderThumb } from './SliderThumb';
 import { useSliderProps } from './hooks/useSliderProps';
-import { clamp, getHumanNumber } from './SliderHelpers';
+import { clamp, getFormattedNumber } from './SliderHelpers';
 export function SliderInstance() {
   const context = React.useContext(Context);
   const {
@@ -24,6 +24,7 @@ export function SliderInstance() {
     isVertical,
     showButtons,
     showStatus,
+    shouldAnimate,
     allProps
   } = useSliderProps();
   const {
@@ -42,7 +43,7 @@ export function SliderInstance() {
     className
   } = allProps;
   const mainParams = {
-    className: classnames("dnb-slider dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(allProps), className, isReverse && 'dnb-slider--reverse', isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', !showButtons && 'dnb-slider--no-buttons', isTrue(stretch) && 'dnb-slider--stretch', label && labelDirection && `dnb-slider__label--${labelDirection}`, showStatus && 'dnb-slider__form-status', status && `dnb-slider__status--${statusState}`)
+    className: classnames("dnb-slider dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', shouldAnimate && 'dnb-slider__state--animate', !showButtons && 'dnb-slider--no-buttons', isTrue(stretch) && 'dnb-slider--stretch', label && labelDirection && `dnb-slider__label--${labelDirection}`, showStatus && 'dnb-slider__form-status', status && `dnb-slider__status--${statusState}`)
   };
   const subtractButton = showButtons ? _SubtractButton || (_SubtractButton = React.createElement(SubtractButton, null)) : null;
   const addButton = showButtons ? _AddButton || (_AddButton = React.createElement(AddButton, null)) : null;
@@ -113,13 +114,13 @@ function SubtractButton() {
     subtractParams['aria-hidden'] = attributes['aria-hidden'];
   }
 
-  const humanNumber = getHumanNumber(value, numberFormat);
+  const humanNumber = getFormattedNumber(value, numberFormat);
   return React.createElement(Button, _extends({
     className: "dnb-slider__button dnb-slider__button--subtract",
     variant: "secondary",
     icon: "subtract",
     size: "small",
-    "aria-label": subtractTitle === null || subtractTitle === void 0 ? void 0 : subtractTitle.replace('%s', humanNumber),
+    "aria-label": subtractTitle === null || subtractTitle === void 0 ? void 0 : subtractTitle.replace('%s', humanNumber.aria || String(value)),
     on_click: onSubtractClickHandler,
     disabled: disabled,
     skeleton: skeleton
@@ -153,13 +154,13 @@ function AddButton() {
     addParams['aria-hidden'] = attributes['aria-hidden'];
   }
 
-  const humanNumber = getHumanNumber(value, numberFormat);
+  const humanNumber = getFormattedNumber(value, numberFormat);
   return React.createElement(Button, _extends({
     className: "dnb-slider__button dnb-slider__button--add",
     variant: "secondary",
     icon: "add",
     size: "small",
-    "aria-label": addTitle === null || addTitle === void 0 ? void 0 : addTitle.replace('%s', humanNumber),
+    "aria-label": addTitle === null || addTitle === void 0 ? void 0 : addTitle.replace('%s', humanNumber.aria || String(value)),
     on_click: onAddClickHandler,
     disabled: disabled,
     skeleton: skeleton

package/es/components/slider/SliderProvider.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { SliderProps, SliderContextTypes } from './types';
+import type { SliderAllProps, SliderContextTypes } from './types';
 export declare const SliderContext: React.Context<SliderContextTypes>;
-export declare function SliderProvider(localProps: SliderProps): JSX.Element;
+export declare function SliderProvider(localProps: SliderAllProps): JSX.Element;

package/es/components/slider/SliderProvider.js

@@ -1,11 +1,10 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "numberFormat", "skeleton", "max", "min", "disabled", "className", "id", "onInit", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
+const _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "tooltip", "alwaysShowTooltip", "skeleton", "max", "min", "disabled", "className", "id", "onInit", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
 import React from 'react';
 import { includeValidProps } from '../../components/form-row/FormRowHelpers';
-import { usePropsWithContext } from '../../shared/hooks';
-import { warn, isTrue, makeUniqueId, dispatchCustomElementEvent, getStatusState } from '../../shared/component-helper';
+import { warn, isTrue, makeUniqueId, dispatchCustomElementEvent, getStatusState, extendPropsWithContext } from '../../shared/component-helper';
 import Context from '../../shared/Context';
-import { closestIndex, formatNumber, getUpdatedValues, roundValue } from './SliderHelpers';
+import { closestIndex, getFormattedNumber, getUpdatedValues, roundValue } from './SliderHelpers';
 import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps';
 const defaultProps = {
   statusState: 'error',
@@ -13,12 +12,13 @@ const defaultProps = {
   subtractTitle: '−',
   min: 0,
   max: 100,
-  value: -1
+  value: -1,
+  multiThumbBehavior: 'swap'
 };
 export const SliderContext = React.createContext(null);
 export function SliderProvider(localProps) {
   const context = React.useContext(Context);
-  const allProps = convertSnakeCaseProps(usePropsWithContext(localProps, defaultProps, {
+  const allProps = convertSnakeCaseProps(extendPropsWithContext(localProps, defaultProps, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
   }, context === null || context === void 0 ? void 0 : context.getTranslation(localProps).Slider, includeValidProps(context === null || context === void 0 ? void 0 : context.FormRow, {
     vertical: null
@@ -45,7 +45,10 @@ export function SliderProvider(localProps) {
     subtractTitle,
     addTitle,
     hideButtons,
+    multiThumbBehavior,
     numberFormat,
+    tooltip,
+    alwaysShowTooltip,
     skeleton,
     max,
     min,
@@ -64,8 +67,11 @@ export function SliderProvider(localProps) {
         attributes = _objectWithoutProperties(allProps, _excluded);
 
   const [value, setValue] = React.useState(_value);
+  const [externValue, updateExternValue] = React.useState(_value);
+  const realtimeValue = React.useRef(_value);
   const [thumbState, setThumbState] = React.useState('initial');
   const thumbIndex = React.useRef(-1);
+  const [shouldAnimate, updateAnimateState] = React.useState(false);
   const [isVertical] = React.useState(isTrue(_vertical));
   const [isReverse] = React.useState(isVertical ? !isTrue(_reverse) : isTrue(_reverse));
   const isMulti = Array.isArray(value);
@@ -93,24 +99,57 @@ export function SliderProvider(localProps) {
     return currentIndex;
   };
 
+  const updateValue = value => {
+    setValue(value);
+    realtimeValue.current = value;
+  };
+
   const emitChange = (event, rawValue) => {
     if (disabled || isTrue(skeleton)) {
       return;
     }
 
-    const currentValue = roundValue(rawValue, step);
-
-    if (currentValue > -1 && rawValue !== value) {
-      let newValue = currentValue;
+    let numberValue = roundValue(rawValue, step);
+    let multiValues = numberValue;
 
+    if (numberValue > -1) {
       if (isMulti) {
-        const currentIndex = getAndUpdateCurrentIndex(currentValue);
-        newValue = getUpdatedValues(value, currentIndex, currentValue);
+        const currentIndex = getAndUpdateCurrentIndex(numberValue);
+        const lower = realtimeValue.current[currentIndex - 1];
+        const upper = realtimeValue.current[currentIndex + 1];
+
+        if (multiThumbBehavior === 'omit') {
+          if (numberValue < lower) {
+            numberValue = lower;
+          }
+
+          if (numberValue > upper) {
+            numberValue = upper;
+          }
+        }
+
+        multiValues = getUpdatedValues(multiThumbBehavior === 'push' ? realtimeValue.current : value, currentIndex, numberValue);
+
+        if (multiThumbBehavior === 'push') {
+          if (typeof lower !== 'undefined' && numberValue < lower) {
+            multiValues[currentIndex - 1] = numberValue;
+          }
+
+          if (typeof upper !== 'undefined' && numberValue >= upper) {
+            multiValues[currentIndex + 1] = numberValue;
+          }
+        }
+
+        if (numberValue === realtimeValue.current[currentIndex]) {
+          return;
+        }
+      } else if (numberValue === realtimeValue.current) {
+        return;
       }
 
       if (typeof onChange === 'function') {
         const obj = {
-          value: newValue,
+          value: multiValues,
           rawValue,
           raw_value: rawValue,
           event,
@@ -118,36 +157,41 @@ export function SliderProvider(localProps) {
         };
 
         if (numberFormat) {
-          obj.number = formatNumber(currentValue, numberFormat);
+          obj.number = getFormattedNumber(numberValue, numberFormat).number;
         }
 
         dispatchCustomElementEvent(allProps, 'onChange', obj);
       }
 
-      setValue(newValue);
+      updateValue(multiValues);
     }
   };
 
   React.useEffect(() => {
     if (isMulti) {
       const hasChanged = _value.some((val, i) => {
-        return val !== value[i];
+        return val !== externValue[i];
       });
 
       if (hasChanged) {
-        setValue(_value);
+        updateValue(_value);
+        updateExternValue(_value);
       }
-    } else {
-      setValue(_value);
+    } else if (_value !== externValue) {
+      updateValue(_value);
+      updateExternValue(_value);
     }
   }, [_value, isMulti]);
   const trackRef = React.useRef();
-  const jumpedTimeout = React.useRef();
+  const animationTimeout = React.useRef();
+
+  const setShouldAnimate = state => {
+    updateAnimateState(state);
+    clearTimeout(animationTimeout.current);
 
-  const setJumpedState = () => {
-    setThumbState('jumped');
-    clearTimeout(jumpedTimeout.current);
-    jumpedTimeout.current = setTimeout(() => setThumbState('normal'), 100);
+    if (state) {
+      animationTimeout.current = setTimeout(() => updateAnimateState(false), 250);
+    }
   };
 
   const showStatus = getStatusState(status);
@@ -158,6 +202,7 @@ export function SliderProvider(localProps) {
       isMulti,
       isReverse,
       isVertical,
+      shouldAnimate,
       value,
       values,
       setValue,
@@ -171,8 +216,8 @@ export function SliderProvider(localProps) {
       emitChange,
       allProps,
       trackRef,
-      setJumpedState,
-      jumpedTimeout
+      setShouldAnimate,
+      animationTimeout
     }
   }, localProps.children);
 }

package/es/components/slider/SliderThumb.js

@@ -1,24 +1,36 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import React from 'react';
 import { combineDescribedBy, combineLabelledBy, validateDOMAttributes } from '../../shared/component-helper';
 import Button from '../button/Button';
+import Tooltip from '../tooltip/Tooltip';
 import { useSliderEvents } from './hooks/useSliderEvents';
 import { useSliderProps } from './hooks/useSliderProps';
-import { clamp, getHumanNumber } from './SliderHelpers';
+import { clamp, getFormattedNumber } from './SliderHelpers';
 export function SliderThumb() {
   const {
-    values,
+    values
+  } = useSliderProps();
+  return React.createElement(React.Fragment, null, values.map((value, i) => {
+    return React.createElement(Thumb, {
+      key: i,
+      value: value,
+      currentIndex: i
+    });
+  }));
+}
+
+function Thumb({
+  value,
+  currentIndex
+}) {
+  const {
     thumbIndex,
     isVertical,
+    isReverse,
     showStatus,
     attributes,
-    allProps
+    allProps,
+    shouldAnimate
   } = useSliderProps();
   const {
     id,
@@ -29,22 +41,41 @@ export function SliderThumb() {
     skeleton,
     disabled,
     suffix,
-    numberFormat
+    numberFormat,
+    tooltip,
+    alwaysShowTooltip
   } = allProps;
+  const index = thumbIndex.current;
+  let percent = clamp((value - min) * 100 / (max - min));
+
+  if (isReverse) {
+    percent = 100 - percent;
+  }
+
+  const style = {
+    zIndex: index === currentIndex ? 4 : 3,
+    [`${isVertical ? 'top' : 'left'}`]: `${percent}%`
+  };
+  const {
+    number,
+    aria
+  } = getFormattedNumber(value, numberFormat);
+  const [showTooltip, setShowTooltip] = React.useState(false);
+
+  const onMouseEnterHandler = () => {
+    setShowTooltip(true);
+  };
+
+  const onMouseLeaveHandler = () => {
+    setShowTooltip(false);
+  };
+
   const {
     onThumbMouseDownHandler,
     onThumbMouseUpHandler,
-    onThumbBlurHandler,
-    onThumbFocusHandler,
     onHelperChangeHandler,
     onHelperFocusHandler
   } = useSliderEvents();
-
-  const thumbParams = _objectSpread({
-    onBlur: onThumbBlurHandler,
-    onFocus: onThumbFocusHandler
-  }, attributes);
-
   const helperParams = {};
 
   if (label) {
@@ -55,46 +86,56 @@ export function SliderThumb() {
     helperParams['aria-describedby'] = combineDescribedBy(helperParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
   }
 
-  validateDOMAttributes(null, helperParams);
-  validateDOMAttributes(allProps, thumbParams);
-  return React.createElement(React.Fragment, null, values.map((value, i) => {
-    const index = thumbIndex.current;
-    const percent = clamp((value - min) * 100 / (max - min));
-    const style = {
-      zIndex: index === i ? 4 : 3,
-      [`${isVertical ? 'top' : 'left'}`]: `${percent}%`
+  const thumbParams = attributes;
+
+  if (tooltip) {
+    thumbParams.onMouseEnter = onMouseEnterHandler;
+    thumbParams.onMouseLeave = onMouseLeaveHandler;
+    thumbParams.onTouchStart = onMouseEnterHandler;
+    thumbParams.onTouchEnd = onMouseLeaveHandler;
+    helperParams.onBlur = onMouseLeaveHandler;
+
+    helperParams.onFocus = event => {
+      onHelperFocusHandler(event);
+      onMouseEnterHandler();
     };
-    const humanNumber = getHumanNumber(value, numberFormat);
-    return React.createElement(React.Fragment, {
-      key: i
-    }, React.createElement("span", {
-      className: "dnb-slider__thumb",
-      style: style
-    }, React.createElement("input", _extends({
-      type: "range",
-      className: "dnb-slider__button-helper",
-      min: min,
-      max: max,
-      step: step,
-      value: value,
-      disabled: disabled,
-      onChange: onHelperChangeHandler,
-      onFocus: onHelperFocusHandler,
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": value,
-      "aria-valuetext": humanNumber ? humanNumber : undefined,
-      "aria-orientation": isVertical ? 'vertical' : 'horizontal',
-      "data-index": i
-    }, helperParams)), React.createElement(Button, _extends({
-      element: "span",
-      type: "",
-      variant: "secondary",
-      disabled: disabled,
-      skeleton: skeleton,
-      "data-index": i,
-      onMouseDown: onThumbMouseDownHandler,
-      onMouseUp: onThumbMouseUpHandler
-    }, thumbParams))));
-  }));
+  }
+
+  validateDOMAttributes(allProps, thumbParams);
+  const elemRef = React.useRef();
+  return React.createElement(React.Fragment, null, React.createElement("span", {
+    className: "dnb-slider__thumb",
+    style: style,
+    ref: elemRef
+  }, React.createElement("input", _extends({
+    type: "range",
+    className: "dnb-slider__button-helper",
+    min: min,
+    max: max,
+    step: step,
+    value: value,
+    disabled: disabled,
+    onChange: onHelperChangeHandler,
+    onFocus: onHelperFocusHandler,
+    onMouseDown: onThumbMouseDownHandler,
+    onMouseUp: onThumbMouseUpHandler,
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": value,
+    "aria-valuetext": aria ? aria : undefined,
+    "aria-orientation": isVertical ? 'vertical' : 'horizontal',
+    "data-index": currentIndex
+  }, helperParams)), React.createElement(Button, _extends({
+    element: "span",
+    type: "",
+    variant: "secondary",
+    disabled: disabled,
+    skeleton: skeleton
+  }, thumbParams)), tooltip && React.createElement(Tooltip, {
+    key: `group-${currentIndex}`,
+    targetElement: elemRef,
+    animatePosition: shouldAnimate,
+    active: showTooltip || alwaysShowTooltip,
+    hideDelay: 300
+  }, number || value, shouldAnimate)));
 }

package/es/components/slider/SliderTrack.js

@@ -3,10 +3,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var _span;
 
 import React from 'react';
-import { dispatchCustomElementEvent, validateDOMAttributes } from '../../shared/component-helper';
+import { dispatchCustomElementEvent } from '../../shared/component-helper';
 import { useSliderEvents } from './hooks/useSliderEvents';
 import { useSliderProps } from './hooks/useSliderProps';
-import { clamp, formatNumber } from './SliderHelpers';
+import { clamp, getFormattedNumber } from './SliderHelpers';
 export function SliderMainTrack({
   children
 }) {
@@ -15,8 +15,7 @@ export function SliderMainTrack({
     value,
     allProps,
     trackRef,
-    jumpedTimeout,
-    thumbState
+    animationTimeout
   } = useSliderProps();
   const {
     id,
@@ -24,7 +23,7 @@ export function SliderMainTrack({
     onInit
   } = allProps;
   const {
-    onTrackClickHandler,
+    onTrackMouseUpHandler,
     onThumbMouseDownHandler,
     removeEvents
   } = useSliderEvents();
@@ -36,7 +35,7 @@ export function SliderMainTrack({
       };
 
       if (numberFormat) {
-        obj.number = formatNumber(value, numberFormat);
+        obj.number = getFormattedNumber(value, numberFormat);
       }
 
       dispatchCustomElementEvent(allProps, 'onInit', obj);
@@ -44,20 +43,19 @@ export function SliderMainTrack({
 
     return () => {
       removeEvents();
-      clearTimeout(jumpedTimeout.current);
+      clearTimeout(animationTimeout.current);
     };
   }, []);
   const trackParams = {
-    className: 'dnb-slider__track' + (thumbState ? ` dnb-slider__state--${thumbState}` : ""),
-    onTouchStart: onTrackClickHandler,
+    onTouchStart: onTrackMouseUpHandler,
     onTouchStartCapture: onThumbMouseDownHandler,
-    onMouseDown: onTrackClickHandler,
+    onMouseDown: onTrackMouseUpHandler,
     onMouseDownCapture: onThumbMouseDownHandler
   };
-  validateDOMAttributes(null, trackParams);
   return React.createElement("span", _extends({
     id: id,
-    ref: trackRef
+    ref: trackRef,
+    className: "dnb-slider__track"
   }, trackParams), children);
 }
 const trackObj = [['right', 'left'], ['bottom', 'top']];
@@ -65,6 +63,7 @@ export function SliderTrackBefore() {
   const {
     values: origValues,
     isVertical,
+    isReverse,
     thumbIndex,
     allProps: {
       min,
@@ -85,8 +84,8 @@ export function SliderTrackBefore() {
   const lowerPercent = 100 - clamp((lowerValue - min) * 100 / (max - min));
   const units = [trackObj[isVertical ? 1 : 0][0], trackObj[isVertical ? 1 : 0][1]];
   const style = {};
-  style[units[0]] = `${lowerPercent}%`;
-  style[units[1]] = `${upperPercent}%`;
+  style[units[isReverse ? 1 : 0]] = `${lowerPercent}%`;
+  style[units[isReverse ? 0 : 1]] = `${upperPercent}%`;
   return React.createElement("span", {
     className: "dnb-slider__line dnb-slider__line__before",
     style: style

package/es/components/slider/hooks/useSliderEvents.d.ts

@@ -2,9 +2,7 @@ import React from 'react';
 export declare function useSliderEvents(): {
     onThumbMouseDownHandler: (event: React.SyntheticEvent) => void;
     onThumbMouseUpHandler: () => void;
-    onTrackClickHandler: (event: MouseEvent | TouchEvent) => void;
-    onThumbFocusHandler: () => void;
-    onThumbBlurHandler: () => void;
+    onTrackMouseUpHandler: (event: MouseEvent | TouchEvent) => void;
     onHelperChangeHandler: (event: React.FormEvent<HTMLInputElement>) => void;
     onHelperFocusHandler: (event: React.FormEvent<HTMLInputElement>) => void;
     removeEvents: () => void;