@dnb/eufemia 9.29.0 → 9.31.0

package/cjs/components/slider/SliderThumb.js

@@ -1,16 +1,20 @@
 "use strict";
 
-require("core-js/modules/es.object.keys.js");
-
 require("core-js/modules/es.symbol.js");
 
-require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
 
-require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.function.name.js");
 
-require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.array.from.js");
 
-require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.object.assign.js");
 
@@ -33,9 +37,11 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _Button = _interopRequireDefault(require("../button/Button"));
 
+var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
+
 var _useSliderEvents2 = require("./hooks/useSliderEvents");
 
-var _useSliderProps2 = require("./hooks/useSliderProps");
+var _useSliderProps3 = require("./hooks/useSliderProps");
 
 var _SliderHelpers = require("./SliderHelpers");
 
@@ -43,20 +49,45 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-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; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function SliderThumb() {
-  var _useSliderProps = (0, _useSliderProps2.useSliderProps)(),
-      values = _useSliderProps.values,
-      thumbIndex = _useSliderProps.thumbIndex,
-      isVertical = _useSliderProps.isVertical,
-      showStatus = _useSliderProps.showStatus,
-      attributes = _useSliderProps.attributes,
-      allProps = _useSliderProps.allProps;
+  var _useSliderProps = (0, _useSliderProps3.useSliderProps)(),
+      values = _useSliderProps.values;
+
+  return _react.default.createElement(_react.default.Fragment, null, values.map(function (value, i) {
+    return _react.default.createElement(Thumb, {
+      key: i,
+      value: value,
+      currentIndex: i
+    });
+  }));
+}
+
+function Thumb(_ref) {
+  var value = _ref.value,
+      currentIndex = _ref.currentIndex;
+
+  var _useSliderProps2 = (0, _useSliderProps3.useSliderProps)(),
+      thumbIndex = _useSliderProps2.thumbIndex,
+      isVertical = _useSliderProps2.isVertical,
+      isReverse = _useSliderProps2.isReverse,
+      showStatus = _useSliderProps2.showStatus,
+      attributes = _useSliderProps2.attributes,
+      allProps = _useSliderProps2.allProps,
+      shouldAnimate = _useSliderProps2.shouldAnimate;
 
   var id = allProps.id,
       label = allProps.label,
@@ -66,21 +97,43 @@ function SliderThumb() {
       skeleton = allProps.skeleton,
       disabled = allProps.disabled,
       suffix = allProps.suffix,
-      numberFormat = allProps.numberFormat;
+      numberFormat = allProps.numberFormat,
+      tooltip = allProps.tooltip,
+      alwaysShowTooltip = allProps.alwaysShowTooltip;
+  var index = thumbIndex.current;
+  var percent = (0, _SliderHelpers.clamp)((value - min) * 100 / (max - min));
+
+  if (isReverse) {
+    percent = 100 - percent;
+  }
+
+  var style = _defineProperty({
+    zIndex: index === currentIndex ? 4 : 3
+  }, "".concat(isVertical ? 'top' : 'left'), "".concat(percent, "%"));
+
+  var _getFormattedNumber = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat),
+      number = _getFormattedNumber.number,
+      aria = _getFormattedNumber.aria;
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showTooltip = _React$useState2[0],
+      setShowTooltip = _React$useState2[1];
+
+  var onMouseEnterHandler = function onMouseEnterHandler() {
+    setShowTooltip(true);
+  };
+
+  var onMouseLeaveHandler = function onMouseLeaveHandler() {
+    setShowTooltip(false);
+  };
 
   var _useSliderEvents = (0, _useSliderEvents2.useSliderEvents)(),
       onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
       onThumbMouseUpHandler = _useSliderEvents.onThumbMouseUpHandler,
-      onThumbBlurHandler = _useSliderEvents.onThumbBlurHandler,
-      onThumbFocusHandler = _useSliderEvents.onThumbFocusHandler,
       onHelperChangeHandler = _useSliderEvents.onHelperChangeHandler,
       onHelperFocusHandler = _useSliderEvents.onHelperFocusHandler;
 
-  var thumbParams = _objectSpread({
-    onBlur: onThumbBlurHandler,
-    onFocus: onThumbFocusHandler
-  }, attributes);
-
   var helperParams = {};
 
   if (label) {
@@ -91,47 +144,58 @@ function SliderThumb() {
     helperParams['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(helperParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
   }
 
-  (0, _componentHelper.validateDOMAttributes)(null, helperParams);
+  var thumbParams = attributes;
+
+  if (tooltip) {
+    thumbParams.onMouseEnter = onMouseEnterHandler;
+    thumbParams.onMouseLeave = onMouseLeaveHandler;
+    thumbParams.onTouchStart = onMouseEnterHandler;
+    thumbParams.onTouchEnd = onMouseLeaveHandler;
+    helperParams.onBlur = onMouseLeaveHandler;
+
+    helperParams.onFocus = function (event) {
+      onHelperFocusHandler(event);
+      onMouseEnterHandler();
+    };
+  }
+
   (0, _componentHelper.validateDOMAttributes)(allProps, thumbParams);
-  return _react.default.createElement(_react.default.Fragment, null, values.map(function (value, i) {
-    var index = thumbIndex.current;
-    var percent = (0, _SliderHelpers.clamp)((value - min) * 100 / (max - min));
-
-    var style = _defineProperty({
-      zIndex: index === i ? 4 : 3
-    }, "".concat(isVertical ? 'top' : 'left'), "".concat(percent, "%"));
-
-    var humanNumber = (0, _SliderHelpers.getHumanNumber)(value, numberFormat);
-    return _react.default.createElement(_react.default.Fragment, {
-      key: i
-    }, _react.default.createElement("span", {
-      className: "dnb-slider__thumb",
-      style: style
-    }, _react.default.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.default.createElement(_Button.default, _extends({
-      element: "span",
-      type: "",
-      variant: "secondary",
-      disabled: disabled,
-      skeleton: skeleton,
-      "data-index": i,
-      onMouseDown: onThumbMouseDownHandler,
-      onMouseUp: onThumbMouseUpHandler
-    }, thumbParams))));
-  }));
+
+  var elemRef = _react.default.useRef();
+
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
+    className: "dnb-slider__thumb",
+    style: style,
+    ref: elemRef
+  }, _react.default.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.default.createElement(_Button.default, _extends({
+    element: "span",
+    type: "",
+    variant: "secondary",
+    disabled: disabled,
+    skeleton: skeleton
+  }, thumbParams)), tooltip && _react.default.createElement(_Tooltip.default, {
+    key: "group-".concat(currentIndex),
+    targetElement: elemRef,
+    animatePosition: shouldAnimate,
+    active: showTooltip || alwaysShowTooltip,
+    hideDelay: 300
+  }, number || value, shouldAnimate)));
 }

package/cjs/components/slider/SliderTrack.js

@@ -43,15 +43,14 @@ function SliderMainTrack(_ref) {
       value = _useSliderProps.value,
       allProps = _useSliderProps.allProps,
       trackRef = _useSliderProps.trackRef,
-      jumpedTimeout = _useSliderProps.jumpedTimeout,
-      thumbState = _useSliderProps.thumbState;
+      animationTimeout = _useSliderProps.animationTimeout;
 
   var id = allProps.id,
       numberFormat = allProps.numberFormat,
       onInit = allProps.onInit;
 
   var _useSliderEvents = (0, _useSliderEvents2.useSliderEvents)(),
-      onTrackClickHandler = _useSliderEvents.onTrackClickHandler,
+      onTrackMouseUpHandler = _useSliderEvents.onTrackMouseUpHandler,
       onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
       removeEvents = _useSliderEvents.removeEvents;
 
@@ -63,7 +62,7 @@ function SliderMainTrack(_ref) {
       };
 
       if (numberFormat) {
-        obj.number = (0, _SliderHelpers.formatNumber)(value, numberFormat);
+        obj.number = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat);
       }
 
       (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onInit', obj);
@@ -71,21 +70,20 @@ function SliderMainTrack(_ref) {
 
     return function () {
       removeEvents();
-      clearTimeout(jumpedTimeout.current);
+      clearTimeout(animationTimeout.current);
     };
   }, []);
 
   var trackParams = {
-    className: 'dnb-slider__track' + (thumbState ? " dnb-slider__state--".concat(thumbState) : ""),
-    onTouchStart: onTrackClickHandler,
+    onTouchStart: onTrackMouseUpHandler,
     onTouchStartCapture: onThumbMouseDownHandler,
-    onMouseDown: onTrackClickHandler,
+    onMouseDown: onTrackMouseUpHandler,
     onMouseDownCapture: onThumbMouseDownHandler
   };
-  (0, _componentHelper.validateDOMAttributes)(null, trackParams);
   return _react.default.createElement("span", _extends({
     id: id,
-    ref: trackRef
+    ref: trackRef,
+    className: "dnb-slider__track"
   }, trackParams), children);
 }
 
@@ -95,6 +93,7 @@ function SliderTrackBefore() {
   var _useSliderProps2 = (0, _useSliderProps3.useSliderProps)(),
       origValues = _useSliderProps2.values,
       isVertical = _useSliderProps2.isVertical,
+      isReverse = _useSliderProps2.isReverse,
       thumbIndex = _useSliderProps2.thumbIndex,
       _useSliderProps2$allP = _useSliderProps2.allProps,
       min = _useSliderProps2$allP.min,
@@ -116,8 +115,8 @@ function SliderTrackBefore() {
   var lowerPercent = 100 - (0, _SliderHelpers.clamp)((lowerValue - min) * 100 / (max - min));
   var units = [trackObj[isVertical ? 1 : 0][0], trackObj[isVertical ? 1 : 0][1]];
   var style = {};
-  style[units[0]] = "".concat(lowerPercent, "%");
-  style[units[1]] = "".concat(upperPercent, "%");
+  style[units[isReverse ? 1 : 0]] = "".concat(lowerPercent, "%");
+  style[units[isReverse ? 0 : 1]] = "".concat(upperPercent, "%");
   return _react.default.createElement("span", {
     className: "dnb-slider__line dnb-slider__line__before",
     style: style

package/cjs/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/cjs/components/slider/hooks/useSliderEvents.js

@@ -19,11 +19,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function useSliderEvents() {
   var _React$useContext = _react.default.useContext(_SliderProvider.SliderContext),
+      isReverse = _React$useContext.isReverse,
       emitChange = _React$useContext.emitChange,
       trackRef = _React$useContext.trackRef,
       isVertical = _React$useContext.isVertical,
-      isReverse = _React$useContext.isReverse,
-      setJumpedState = _React$useContext.setJumpedState,
+      setShouldAnimate = _React$useContext.setShouldAnimate,
       setThumbState = _React$useContext.setThumbState,
       setThumbIndex = _React$useContext.setThumbIndex,
       allProps = _React$useContext.allProps;
@@ -33,16 +33,16 @@ function useSliderEvents() {
       onDragStart = allProps.onDragStart,
       onDragEnd = allProps.onDragEnd;
 
-  var onTrackClickHandler = function onTrackClickHandler(event) {
-    var percent = (0, _SliderHelpers.calculatePercent)(trackRef.current, event, isVertical, isReverse);
-    emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max));
-    setJumpedState();
+  var onTrackMouseUpHandler = function onTrackMouseUpHandler(event) {
+    var percent = (0, _SliderHelpers.calculatePercent)(trackRef.current, event, isVertical);
+    emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max, isReverse));
+    setShouldAnimate(true);
   };
 
   var onThumbMouseDownHandler = function onThumbMouseDownHandler(event) {
     var target = event.target;
     setThumbIndex(parseFloat(target.dataset.index));
-    setThumbState('released');
+    setThumbState('activated');
 
     if (typeof onDragStart === 'function') {
       (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onDragStart', {
@@ -52,10 +52,10 @@ 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) {
         (0, _componentHelper.warn)(e);
       }
@@ -63,27 +63,23 @@ function useSliderEvents() {
   };
 
   var onThumbMouseUpHandler = function onThumbMouseUpHandler() {
-    setThumbState('activated');
-  };
-
-  var onTrackTouchEndHandler = function onTrackTouchEndHandler(event) {
-    return onTrackMouseUpHandler(event);
+    setThumbState('released');
   };
 
   var removeEvents = function 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) {
         (0, _componentHelper.warn)(e);
       }
     }
   };
 
-  var onTrackMouseUpHandler = function onTrackMouseUpHandler(event) {
+  var onBodyMouseUpHandler = function onBodyMouseUpHandler(event) {
     removeEvents();
     setThumbIndex(-1);
     setThumbState('normal');
@@ -95,32 +91,21 @@ function useSliderEvents() {
     }
   };
 
-  var onTrackTouchMoveHandler = function onTrackTouchMoveHandler(event) {
-    return onTrackMouseMoveHandler(event);
-  };
-
-  var onTrackMouseMoveHandler = function onTrackMouseMoveHandler(event) {
-    var _event, _event$detail;
-
+  var onBodyMouseMoveHandler = function onBodyMouseMoveHandler(event) {
+    event.preventDefault();
     var 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 = (0, _SliderHelpers.createMockDiv)(event.detail);
       event = event.detail;
     }
 
     if (elem) {
-      var percent = (0, _SliderHelpers.calculatePercent)(elem, event, isVertical, isReverse);
-      emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max));
+      var percent = (0, _SliderHelpers.calculatePercent)(elem, event, isVertical);
+      emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max, isReverse));
     }
-  };
-
-  var onThumbFocusHandler = function onThumbFocusHandler() {
-    setThumbState('focused');
-  };
 
-  var onThumbBlurHandler = function onThumbBlurHandler() {
-    setThumbState('normal');
+    setShouldAnimate(false);
   };
 
   var onHelperChangeHandler = function onHelperChangeHandler(event) {
@@ -136,9 +121,7 @@ function useSliderEvents() {
   return {
     onThumbMouseDownHandler: onThumbMouseDownHandler,
     onThumbMouseUpHandler: onThumbMouseUpHandler,
-    onTrackClickHandler: onTrackClickHandler,
-    onThumbFocusHandler: onThumbFocusHandler,
-    onThumbBlurHandler: onThumbBlurHandler,
+    onTrackMouseUpHandler: onTrackMouseUpHandler,
     onHelperChangeHandler: onHelperChangeHandler,
     onHelperFocusHandler: onHelperFocusHandler,
     removeEvents: removeEvents

package/cjs/components/slider/hooks/useSliderProps.d.ts

@@ -1 +1 @@
-export declare function useSliderProps(): import("../types").SliderContextTypes;
+export declare function useSliderProps(): import("..").SliderContextTypes;

package/cjs/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/cjs/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;
@@ -101,12 +102,6 @@
     min-width: inherit;
     min-height: inherit;
   }
-  &--reverse &__track {
-    transform: scaleX(-1);
-  }
-  &--reverse#{&}--vertical &__track {
-    transform: scaleY(-1);
-  }
 
   &__line {
     position: absolute;
@@ -157,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,16 +176,17 @@
     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);
   }
 
-  &__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,

package/cjs/components/slider/style/dnb-range.css

@@ -2,6 +2,11 @@
 * DNB Input
 *
 */
+/*
+* Deprecated
+* Will be removed in v10
+*
+*/
 /**
  * This file is only used to make components independent
  * so that they can get imported individually, without the core styles
@@ -71,6 +76,11 @@
 /*
 * Range input
 */
+/*
+* Deprecated
+* Will be removed in v10
+*
+*/
 :root {
   --range-track-height: 0.25rem;
   --range-thumb-dimension: 2rem; }

package/cjs/components/slider/style/dnb-range.scss

@@ -3,6 +3,12 @@
 *
 */
 
+/*
+* Deprecated
+* Will be removed in v10
+*
+*/
+
 @import '../../../style/components/imports.scss';
 
 .dnb-range {