@dnb/eufemia 9.27.0 → 9.30.0

package/components/slider/SliderThumb.js

@@ -0,0 +1,114 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+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 "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.map.js";
+import React from 'react';
+import { combineDescribedBy, combineLabelledBy, validateDOMAttributes } from '../../shared/component-helper';
+import Button from '../button/Button';
+import { useSliderEvents } from './hooks/useSliderEvents';
+import { useSliderProps } from './hooks/useSliderProps';
+import { clamp, getHumanNumber } from './SliderHelpers';
+export function SliderThumb() {
+  var _useSliderProps = useSliderProps(),
+      values = _useSliderProps.values,
+      thumbIndex = _useSliderProps.thumbIndex,
+      isVertical = _useSliderProps.isVertical,
+      isReverse = _useSliderProps.isReverse,
+      showStatus = _useSliderProps.showStatus,
+      attributes = _useSliderProps.attributes,
+      allProps = _useSliderProps.allProps;
+
+  var id = allProps.id,
+      label = allProps.label,
+      min = allProps.min,
+      max = allProps.max,
+      step = allProps.step,
+      skeleton = allProps.skeleton,
+      disabled = allProps.disabled,
+      suffix = allProps.suffix,
+      numberFormat = allProps.numberFormat;
+
+  var _useSliderEvents = 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) {
+    helperParams['aria-labelledby'] = combineLabelledBy(helperParams, label ? id + '-label' : null);
+  }
+
+  if (showStatus || suffix) {
+    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(function (value, i) {
+    var index = thumbIndex.current;
+    var percent = clamp((value - min) * 100 / (max - min));
+
+    if (isReverse) {
+      percent = 100 - percent;
+    }
+
+    var style = _defineProperty({
+      zIndex: index === i ? 4 : 3
+    }, "".concat(isVertical ? 'top' : 'left'), "".concat(percent, "%"));
+
+    var 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))));
+  }));
+}

package/components/slider/SliderTrack.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function SliderMainTrack({ children, }: {
+    children: React.ReactNode | React.ReactNode[];
+}): JSX.Element;
+export declare function SliderTrackBefore(): JSX.Element;
+export declare function SliderTrackAfter(): JSX.Element;

package/components/slider/SliderTrack.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.sort.js";
+import "core-js/modules/es.array.reverse.js";
+import React from 'react';
+import { dispatchCustomElementEvent, validateDOMAttributes } from '../../shared/component-helper';
+import { useSliderEvents } from './hooks/useSliderEvents';
+import { useSliderProps } from './hooks/useSliderProps';
+import { clamp, formatNumber } from './SliderHelpers';
+export function SliderMainTrack(_ref) {
+  var children = _ref.children;
+
+  var _useSliderProps = useSliderProps(),
+      isMulti = _useSliderProps.isMulti,
+      value = _useSliderProps.value,
+      allProps = _useSliderProps.allProps,
+      trackRef = _useSliderProps.trackRef,
+      jumpedTimeout = _useSliderProps.jumpedTimeout,
+      thumbState = _useSliderProps.thumbState;
+
+  var id = allProps.id,
+      numberFormat = allProps.numberFormat,
+      onInit = allProps.onInit;
+
+  var _useSliderEvents = useSliderEvents(),
+      onTrackClickHandler = _useSliderEvents.onTrackClickHandler,
+      onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
+      removeEvents = _useSliderEvents.removeEvents;
+
+  React.useEffect(function () {
+    if (typeof onInit === 'function' && !isMulti) {
+      var obj = {
+        value: value,
+        number: null
+      };
+
+      if (numberFormat) {
+        obj.number = formatNumber(value, numberFormat);
+      }
+
+      dispatchCustomElementEvent(allProps, 'onInit', obj);
+    }
+
+    return function () {
+      removeEvents();
+      clearTimeout(jumpedTimeout.current);
+    };
+  }, []);
+  var trackParams = {
+    className: 'dnb-slider__track' + (thumbState ? " dnb-slider__state--".concat(thumbState) : ""),
+    onTouchStart: onTrackClickHandler,
+    onTouchStartCapture: onThumbMouseDownHandler,
+    onMouseDown: onTrackClickHandler,
+    onMouseDownCapture: onThumbMouseDownHandler
+  };
+  validateDOMAttributes(null, trackParams);
+  return React.createElement("span", _extends({
+    id: id,
+    ref: trackRef
+  }, trackParams), children);
+}
+var trackObj = [['right', 'left'], ['bottom', 'top']];
+export function SliderTrackBefore() {
+  var _useSliderProps2 = useSliderProps(),
+      origValues = _useSliderProps2.values,
+      isVertical = _useSliderProps2.isVertical,
+      isReverse = _useSliderProps2.isReverse,
+      thumbIndex = _useSliderProps2.thumbIndex,
+      _useSliderProps2$allP = _useSliderProps2.allProps,
+      min = _useSliderProps2$allP.min,
+      max = _useSliderProps2$allP.max;
+
+  var values = origValues.sort(function (a, b) {
+    return a - b;
+  });
+  var isBetween = values.length >= 2;
+
+  if (isBetween && values[0] > values[values.length - 1]) {
+    values.reverse();
+  }
+
+  var index = thumbIndex.current;
+  var upperValue = values[isBetween ? 0 : index > -1 ? index : 0];
+  var upperPercent = isBetween ? clamp((upperValue - min) * 100 / (max - min)) : 0;
+  var lowerValue = values[isBetween ? values.length - 1 : index > -1 ? index : 0];
+  var lowerPercent = 100 - clamp((lowerValue - min) * 100 / (max - min));
+  var units = [trackObj[isVertical ? 1 : 0][0], trackObj[isVertical ? 1 : 0][1]];
+  var style = {};
+  style[units[isReverse ? 1 : 0]] = "".concat(lowerPercent, "%");
+  style[units[isReverse ? 0 : 1]] = "".concat(upperPercent, "%");
+  return React.createElement("span", {
+    className: "dnb-slider__line dnb-slider__line__before",
+    style: style
+  });
+}
+export function SliderTrackAfter() {
+  return _span || (_span = React.createElement("span", {
+    className: "dnb-slider__line dnb-slider__line__after"
+  }));
+}

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

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

package/components/slider/hooks/useSliderEvents.js

@@ -0,0 +1,132 @@
+import "core-js/modules/es.parse-float.js";
+import React from 'react';
+import { dispatchCustomElementEvent, warn } from '../../../shared/component-helper';
+import { calculatePercent, createMockDiv, percentToValue } from '../SliderHelpers';
+import { SliderContext } from '../SliderProvider';
+export function useSliderEvents() {
+  var _React$useContext = React.useContext(SliderContext),
+      isReverse = _React$useContext.isReverse,
+      emitChange = _React$useContext.emitChange,
+      trackRef = _React$useContext.trackRef,
+      isVertical = _React$useContext.isVertical,
+      setJumpedState = _React$useContext.setJumpedState,
+      setThumbState = _React$useContext.setThumbState,
+      setThumbIndex = _React$useContext.setThumbIndex,
+      allProps = _React$useContext.allProps;
+
+  var min = allProps.min,
+      max = allProps.max,
+      onDragStart = allProps.onDragStart,
+      onDragEnd = allProps.onDragEnd;
+
+  var onTrackClickHandler = function onTrackClickHandler(event) {
+    var percent = calculatePercent(trackRef.current, event, isVertical);
+    emitChange(event, percentToValue(percent, min, max, isReverse));
+    setJumpedState();
+  };
+
+  var onThumbMouseDownHandler = function onThumbMouseDownHandler(event) {
+    var target = event.target;
+    setThumbIndex(parseFloat(target.dataset.index));
+    setThumbState('released');
+
+    if (typeof onDragStart === 'function') {
+      dispatchCustomElementEvent(allProps, 'onDragStart', {
+        event: event
+      });
+    }
+
+    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);
+      } catch (e) {
+        warn(e);
+      }
+    }
+  };
+
+  var onThumbMouseUpHandler = function onThumbMouseUpHandler() {
+    setThumbState('activated');
+  };
+
+  var onTrackTouchEndHandler = function onTrackTouchEndHandler(event) {
+    return onTrackMouseUpHandler(event);
+  };
+
+  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);
+      } catch (e) {
+        warn(e);
+      }
+    }
+  };
+
+  var onTrackMouseUpHandler = function onTrackMouseUpHandler(event) {
+    removeEvents();
+    setThumbIndex(-1);
+    setThumbState('normal');
+
+    if (typeof onDragEnd === 'function') {
+      dispatchCustomElementEvent(allProps, 'onDragEnd', {
+        event: event
+      });
+    }
+  };
+
+  var onTrackTouchMoveHandler = function onTrackTouchMoveHandler(event) {
+    return onTrackMouseMoveHandler(event);
+  };
+
+  var onTrackMouseMoveHandler = function onTrackMouseMoveHandler(event) {
+    var _event, _event$detail;
+
+    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') {
+      elem = createMockDiv(event.detail);
+      event = event.detail;
+    }
+
+    if (elem) {
+      var percent = calculatePercent(elem, event, isVertical);
+      emitChange(event, percentToValue(percent, min, max, isReverse));
+    }
+  };
+
+  var onThumbFocusHandler = function onThumbFocusHandler() {
+    setThumbState('focused');
+  };
+
+  var onThumbBlurHandler = function onThumbBlurHandler() {
+    setThumbState('normal');
+  };
+
+  var onHelperChangeHandler = function onHelperChangeHandler(event) {
+    var emitEvent = event;
+    emitChange(emitEvent, parseFloat(event.currentTarget.value));
+  };
+
+  var onHelperFocusHandler = function onHelperFocusHandler(event) {
+    var target = event.target;
+    setThumbIndex(parseFloat(target.dataset.index));
+  };
+
+  return {
+    onThumbMouseDownHandler: onThumbMouseDownHandler,
+    onThumbMouseUpHandler: onThumbMouseUpHandler,
+    onTrackClickHandler: onTrackClickHandler,
+    onThumbFocusHandler: onThumbFocusHandler,
+    onThumbBlurHandler: onThumbBlurHandler,
+    onHelperChangeHandler: onHelperChangeHandler,
+    onHelperFocusHandler: onHelperFocusHandler,
+    removeEvents: removeEvents
+  };
+}

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

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

package/components/slider/hooks/useSliderProps.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SliderContext } from '../SliderProvider';
+export function useSliderProps() {
+  return React.useContext(SliderContext);
+}

package/components/slider/style/_slider.scss

@@ -76,34 +76,6 @@
     min-width: 2rem;
 
     cursor: pointer;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      z-index: 2;
-      left: 0;
-      top: 50%;
-
-      width: var(--slider-thumb-size);
-      height: var(--slider-track-height);
-
-      transform: translate3d(0, -50%, 0);
-
-      border-radius: calc(var(--slider-track-height) / 2);
-      background-color: inherit;
-    }
-
-    &::before {
-      background-color: red;
-      left: calc(1px - 1px - var(--slider-space));
-      right: auto;
-    }
-    &::after {
-      background-color: blue;
-      left: auto;
-      right: calc(1px - 1px - var(--slider-space));
-    }
   }
   &--vertical &__track {
     margin: calc(var(--slider-space) * 1.5) 0;
@@ -111,22 +83,12 @@
     // only to make sure we have a visible track
     min-height: 2rem;
     min-width: auto;
-
-    &::before,
-    &::after {
-      left: 50%;
-      transform: translate3d(-50%, 0, 0);
-      width: var(--slider-track-height);
-      height: var(--slider-thumb-size);
-    }
-    &::before {
-      top: calc(1px - 1px - var(--slider-space));
-      bottom: auto;
-    }
-    &::after {
-      top: auto;
-      bottom: calc(1px - 1px - var(--slider-space));
-    }
+  }
+  &--no-buttons &__track {
+    margin: 0 calc(var(--slider-space));
+  }
+  &--no-buttons#{&}--vertical &__track {
+    margin: calc(var(--slider-space)) 0;
   }
 
   &--vertical &__inner {
@@ -139,12 +101,6 @@
     min-width: inherit;
     min-height: inherit;
   }
-  &--reverse &__track {
-    transform: scaleX(-1);
-  }
-  &--reverse#{&}--vertical &__track {
-    transform: scaleY(-1);
-  }
 
   &__line {
     position: absolute;
@@ -152,10 +108,13 @@
     left: 0;
     top: 50%;
 
+    margin: 0 calc(1px - 1px - var(--slider-space));
+
     height: var(--slider-track-height);
     transform: translate3d(0, -50%, 0);
 
     background-color: grey;
+    border-radius: var(--slider-track-height);
   }
   &--vertical &__line {
     width: var(--slider-track-height);
@@ -164,6 +123,8 @@
     left: 50%;
     top: 0;
 
+    margin: calc(1px - 1px - var(--slider-space)) 0;
+
     transform: translate3d(-50%, 0, 0);
   }
 
@@ -177,6 +138,7 @@
   }
   &--vertical &__line__before {
     top: 0;
+    bottom: 0;
   }
   &--vertical &__line__after {
     bottom: 0;
@@ -211,6 +173,8 @@
 
     line-height: var(--slider-button-size);
     transform: translateY(0.25rem);
+
+    z-index: 2;
   }
   &--vertical &__button.dnb-button--size-small {
     transform: translateX(0.25rem);
@@ -218,12 +182,13 @@
 
   &__state--jumped &__thumb,
   &__state--jumped &__line {
-    transition: width 250ms ease 0ms, height 250ms ease 0ms,
-      left 250ms ease 0ms, top 250ms ease 0ms, box-shadow 250ms ease 0ms;
+    transition: left 250ms ease, top 250ms ease, bottom 250ms ease,
+      right 250ms ease, box-shadow 250ms ease;
   }
 
-  &__state--disabled#{&}__track,
-  &__state--disabled &__thumb {
+  &__state--disabled &__track,
+  &__state--disabled &__thumb,
+  &__state--disabled &__line {
     cursor: not-allowed;
   }
 

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

@@ -1192,37 +1192,6 @@ legend.dnb-form-label {
     margin: 0 calc(var(--slider-space) * 1.5);
     min-width: 2rem;
     cursor: pointer; }
-    .dnb-slider__track::before, .dnb-slider__track::after {
-      content: '';
-      position: absolute;
-      z-index: 2;
-      left: 0;
-      top: 50%;
-      width: 2rem;
-      width: var(--slider-thumb-size);
-      height: 0.25rem;
-      height: var(--slider-track-height);
-      -webkit-transform: translate3d(0, -50%, 0);
-              transform: translate3d(0, -50%, 0);
-      border-radius: 0.125rem;
-      border-radius: calc(0.25rem / 2);
-      border-radius: calc(var(--slider-track-height)/2);
-      border-radius: calc(var(--slider-track-height) / 2);
-      background-color: inherit; }
-    .dnb-slider__track::before {
-      background-color: red;
-      left: -1rem;
-      left: calc(1px - 1px - 1rem);
-      left: calc(0px - var(--slider-space));
-      left: calc(1px - 1px - var(--slider-space));
-      right: auto; }
-    .dnb-slider__track::after {
-      background-color: blue;
-      left: auto;
-      right: -1rem;
-      right: calc(1px - 1px - 1rem);
-      right: calc(0px - var(--slider-space));
-      right: calc(1px - 1px - var(--slider-space)); }
   .dnb-slider--vertical .dnb-slider__track {
     margin: 1.5rem 0;
     margin: calc(1rem * 1.5) 0;
@@ -1230,26 +1199,14 @@ legend.dnb-form-label {
     margin: calc(var(--slider-space) * 1.5) 0;
     min-height: 2rem;
     min-width: auto; }
-    .dnb-slider--vertical .dnb-slider__track::before, .dnb-slider--vertical .dnb-slider__track::after {
-      left: 50%;
-      -webkit-transform: translate3d(-50%, 0, 0);
-              transform: translate3d(-50%, 0, 0);
-      width: 0.25rem;
-      width: var(--slider-track-height);
-      height: 2rem;
-      height: var(--slider-thumb-size); }
-    .dnb-slider--vertical .dnb-slider__track::before {
-      top: -1rem;
-      top: calc(1px - 1px - 1rem);
-      top: calc(0px - var(--slider-space));
-      top: calc(1px - 1px - var(--slider-space));
-      bottom: auto; }
-    .dnb-slider--vertical .dnb-slider__track::after {
-      top: auto;
-      bottom: -1rem;
-      bottom: calc(1px - 1px - 1rem);
-      bottom: calc(0px - var(--slider-space));
-      bottom: calc(1px - 1px - var(--slider-space)); }
+  .dnb-slider--no-buttons .dnb-slider__track {
+    margin: 0 1rem;
+    margin: 0 calc(1rem);
+    margin: 0 calc(var(--slider-space)); }
+  .dnb-slider--no-buttons.dnb-slider--vertical .dnb-slider__track {
+    margin: 1rem 0;
+    margin: calc(1rem) 0;
+    margin: calc(var(--slider-space)) 0; }
   .dnb-slider--vertical .dnb-slider__inner {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
@@ -1260,27 +1217,31 @@ legend.dnb-form-label {
     height: inherit;
     min-width: inherit;
     min-height: inherit; }
-  .dnb-slider--reverse .dnb-slider__track {
-    -webkit-transform: scaleX(-1);
-            transform: scaleX(-1); }
-  .dnb-slider--reverse.dnb-slider--vertical .dnb-slider__track {
-    -webkit-transform: scaleY(-1);
-            transform: scaleY(-1); }
   .dnb-slider__line {
     position: absolute;
     left: 0;
     top: 50%;
+    margin: 0 -1rem;
+    margin: 0 calc(1px - 1px - 1rem);
+    margin: 0 calc(0px - var(--slider-space));
+    margin: 0 calc(1px - 1px - var(--slider-space));
     height: 0.25rem;
     height: var(--slider-track-height);
     -webkit-transform: translate3d(0, -50%, 0);
             transform: translate3d(0, -50%, 0);
-    background-color: grey; }
+    background-color: grey;
+    border-radius: 0.25rem;
+    border-radius: var(--slider-track-height); }
   .dnb-slider--vertical .dnb-slider__line {
     width: 0.25rem;
     width: var(--slider-track-height);
     height: auto;
     left: 50%;
     top: 0;
+    margin: -1rem 0;
+    margin: calc(1px - 1px - 1rem) 0;
+    margin: calc(0px - var(--slider-space)) 0;
+    margin: calc(1px - 1px - var(--slider-space)) 0;
     -webkit-transform: translate3d(-50%, 0, 0);
             transform: translate3d(-50%, 0, 0); }
   .dnb-slider__line__before {
@@ -1290,7 +1251,8 @@ legend.dnb-form-label {
     right: 0;
     background-color: #ddd; }
   .dnb-slider--vertical .dnb-slider__line__before {
-    top: 0; }
+    top: 0;
+    bottom: 0; }
   .dnb-slider--vertical .dnb-slider__line__after {
     bottom: 0; }
   .dnb-slider__button-helper, .dnb-slider__thumb {
@@ -1320,18 +1282,20 @@ legend.dnb-form-label {
     line-height: 1.5rem;
     line-height: var(--slider-button-size);
     -webkit-transform: translateY(0.25rem);
-            transform: translateY(0.25rem); }
+            transform: translateY(0.25rem);
+    z-index: 2; }
   .dnb-slider--vertical .dnb-slider__button.dnb-button--size-small {
     -webkit-transform: translateX(0.25rem);
             transform: translateX(0.25rem); }
   .dnb-slider__state--jumped .dnb-slider__thumb,
   .dnb-slider__state--jumped .dnb-slider__line {
-    -webkit-transition: width 250ms ease 0ms, height 250ms ease 0ms, left 250ms ease 0ms, top 250ms ease 0ms, -webkit-box-shadow 250ms ease 0ms;
-    transition: width 250ms ease 0ms, height 250ms ease 0ms, left 250ms ease 0ms, top 250ms ease 0ms, -webkit-box-shadow 250ms ease 0ms;
-    transition: width 250ms ease 0ms, height 250ms ease 0ms, left 250ms ease 0ms, top 250ms ease 0ms, box-shadow 250ms ease 0ms;
-    transition: width 250ms ease 0ms, height 250ms ease 0ms, left 250ms ease 0ms, top 250ms ease 0ms, box-shadow 250ms ease 0ms, -webkit-box-shadow 250ms ease 0ms; }
-  .dnb-slider__state--disabled.dnb-slider__track,
-  .dnb-slider__state--disabled .dnb-slider__thumb {
+    -webkit-transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, -webkit-box-shadow 250ms ease;
+    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, -webkit-box-shadow 250ms ease;
+    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, box-shadow 250ms ease;
+    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, box-shadow 250ms ease, -webkit-box-shadow 250ms ease; }
+  .dnb-slider__state--disabled .dnb-slider__track,
+  .dnb-slider__state--disabled .dnb-slider__thumb,
+  .dnb-slider__state--disabled .dnb-slider__line {
     cursor: not-allowed; }
   .dnb-slider__button-helper {
     pointer-events: none;