@dnb/eufemia 9.30.0 → 9.31.0

package/es/components/slider/SliderHelpers.js

@@ -110,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, 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", "multiThumbBehavior", "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',
@@ -19,7 +18,7 @@ const defaultProps = {
 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
@@ -48,6 +47,8 @@ export function SliderProvider(localProps) {
     hideButtons,
     multiThumbBehavior,
     numberFormat,
+    tooltip,
+    alwaysShowTooltip,
     skeleton,
     max,
     min,
@@ -66,9 +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);
@@ -154,7 +157,7 @@ export function SliderProvider(localProps) {
         };
 
         if (numberFormat) {
-          obj.number = formatNumber(numberValue, numberFormat);
+          obj.number = getFormattedNumber(numberValue, numberFormat).number;
         }
 
         dispatchCustomElementEvent(allProps, 'onChange', obj);
@@ -167,23 +170,28 @@ export function SliderProvider(localProps) {
   React.useEffect(() => {
     if (isMulti) {
       const hasChanged = _value.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);
     }
   }, [_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);
@@ -194,6 +202,7 @@ export function SliderProvider(localProps) {
       isMulti,
       isReverse,
       isVertical,
+      shouldAnimate,
       value,
       values,
       setValue,
@@ -207,8 +216,8 @@ export function SliderProvider(localProps) {
       emitChange,
       allProps,
       trackRef,
-      setJumpedState,
-      jumpedTimeout
+      setShouldAnimate,
+      animationTimeout
     }
   }, localProps.children);
 }

package/es/components/slider/SliderThumb.js

@@ -1,25 +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,
@@ -30,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) {
@@ -56,51 +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;
-    let percent = clamp((value - min) * 100 / (max - min));
+  const thumbParams = attributes;
 
-    if (isReverse) {
-      percent = 100 - percent;
-    }
+  if (tooltip) {
+    thumbParams.onMouseEnter = onMouseEnterHandler;
+    thumbParams.onMouseLeave = onMouseLeaveHandler;
+    thumbParams.onTouchStart = onMouseEnterHandler;
+    thumbParams.onTouchEnd = onMouseLeaveHandler;
+    helperParams.onBlur = onMouseLeaveHandler;
 
-    const style = {
-      zIndex: index === i ? 4 : 3,
-      [`${isVertical ? 'top' : 'left'}`]: `${percent}%`
+    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']];

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;

package/es/components/slider/hooks/useSliderEvents.js

@@ -8,7 +8,7 @@ export function useSliderEvents() {
     emitChange,
     trackRef,
     isVertical,
-    setJumpedState,
+    setShouldAnimate,
     setThumbState,
     setThumbIndex,
     allProps
@@ -20,16 +20,16 @@ export function useSliderEvents() {
     onDragEnd
   } = allProps;
 
-  const onTrackClickHandler = event => {
+  const onTrackMouseUpHandler = event => {
     const percent = calculatePercent(trackRef.current, event, isVertical);
     emitChange(event, percentToValue(percent, min, max, isReverse));
-    setJumpedState();
+    setShouldAnimate(true);
   };
 
   const onThumbMouseDownHandler = event => {
     const target = event.target;
     setThumbIndex(parseFloat(target.dataset.index));
-    setThumbState('released');
+    setThumbState('activated');
 
     if (typeof onDragStart === 'function') {
       dispatchCustomElementEvent(allProps, 'onDragStart', {
@@ -39,10 +39,10 @@ export function useSliderEvents() {
 
     if (typeof document !== 'undefined') {
       try {
-        document.body.addEventListener('touchmove', onTrackTouchMoveHandler);
-        document.body.addEventListener('touchend', onTrackTouchEndHandler);
-        document.body.addEventListener('mousemove', onTrackMouseMoveHandler);
-        document.body.addEventListener('mouseup', onTrackMouseUpHandler);
+        document.body.addEventListener('touchmove', onBodyMouseMoveHandler);
+        document.body.addEventListener('touchend', onBodyMouseUpHandler);
+        document.body.addEventListener('mousemove', onBodyMouseMoveHandler);
+        document.body.addEventListener('mouseup', onBodyMouseUpHandler);
       } catch (e) {
         warn(e);
       }
@@ -50,25 +50,23 @@ export function useSliderEvents() {
   };
 
   const onThumbMouseUpHandler = () => {
-    setThumbState('activated');
+    setThumbState('released');
   };
 
-  const onTrackTouchEndHandler = event => onTrackMouseUpHandler(event);
-
   const removeEvents = () => {
     if (typeof document !== 'undefined') {
       try {
-        document.body.removeEventListener('touchmove', onTrackTouchMoveHandler);
-        document.body.removeEventListener('touchend', onTrackTouchEndHandler);
-        document.body.removeEventListener('mousemove', onTrackMouseMoveHandler);
-        document.body.removeEventListener('mouseup', onTrackMouseUpHandler);
+        document.body.removeEventListener('touchmove', onBodyMouseMoveHandler);
+        document.body.removeEventListener('touchend', onBodyMouseUpHandler);
+        document.body.removeEventListener('mousemove', onBodyMouseMoveHandler);
+        document.body.removeEventListener('mouseup', onBodyMouseUpHandler);
       } catch (e) {
         warn(e);
       }
     }
   };
 
-  const onTrackMouseUpHandler = event => {
+  const onBodyMouseUpHandler = event => {
     removeEvents();
     setThumbIndex(-1);
     setThumbState('normal');
@@ -80,14 +78,11 @@ export function useSliderEvents() {
     }
   };
 
-  const onTrackTouchMoveHandler = event => onTrackMouseMoveHandler(event);
-
-  const onTrackMouseMoveHandler = event => {
-    var _event, _event$detail;
-
+  const onBodyMouseMoveHandler = event => {
+    event.preventDefault();
     let elem = trackRef.current;
 
-    if (typeof ((_event = event) === null || _event === void 0 ? void 0 : (_event$detail = _event.detail) === null || _event$detail === void 0 ? void 0 : _event$detail.height) !== 'undefined') {
+    if (process.env.NODE_ENV === 'test') {
       elem = createMockDiv(event.detail);
       event = event.detail;
     }
@@ -96,14 +91,8 @@ export function useSliderEvents() {
       const percent = calculatePercent(elem, event, isVertical);
       emitChange(event, percentToValue(percent, min, max, isReverse));
     }
-  };
 
-  const onThumbFocusHandler = () => {
-    setThumbState('focused');
-  };
-
-  const onThumbBlurHandler = () => {
-    setThumbState('normal');
+    setShouldAnimate(false);
   };
 
   const onHelperChangeHandler = event => {
@@ -119,9 +108,7 @@ export function useSliderEvents() {
   return {
     onThumbMouseDownHandler,
     onThumbMouseUpHandler,
-    onTrackClickHandler,
-    onThumbFocusHandler,
-    onThumbBlurHandler,
+    onTrackMouseUpHandler,
     onHelperChangeHandler,
     onHelperFocusHandler,
     removeEvents

package/es/components/slider/style/_range.scss

@@ -2,6 +2,12 @@
 * Range input
 */
 
+/*
+* Deprecated
+* Will be removed in v10
+*
+*/
+
 :root {
   --range-track-height: 0.25rem;
   --range-thumb-dimension: 2rem;

package/es/components/slider/style/_slider.scss

@@ -13,6 +13,7 @@
 .dnb-slider {
   user-select: none;
   -webkit-user-select: none; // Safari / Touch fix
+  -webkit-touch-callout: none; // Safari / Touch fix
 
   // use flex to make sure we have the whole space available
   display: flex;
@@ -151,7 +152,8 @@
     top: 0;
     z-index: 3;
 
-    display: block;
+    display: flex;
+    justify-content: center;
     transform: translate3d(-50%, 0, 0);
 
     // Because of the DropShadow
@@ -180,10 +182,11 @@
     transform: translateX(0.25rem);
   }
 
-  &__state--jumped &__thumb,
-  &__state--jumped &__line {
-    transition: left 250ms ease, top 250ms ease, bottom 250ms ease,
-      right 250ms ease, box-shadow 250ms ease;
+  &__state--animate &__thumb,
+  &__state--animate &__line {
+    transition: left 250ms #{$defaultEasing}, top 250ms #{$defaultEasing},
+      bottom 250ms #{$defaultEasing}, right 250ms #{$defaultEasing},
+      box-shadow 250ms #{$defaultEasing};
   }
 
   &__state--disabled &__track,