@equinor/eds-core-react 0.35.1 → 0.36.0

package/dist/esm/components/Slider/Slider.js

@@ -1,6 +1,3 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { slider } from './Slider.tokens.js';
@@ -10,157 +7,146 @@ import { SliderInput } from './SliderInput.js';
 import { bordersTemplate, useId } from '@equinor/eds-utils';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["min", "max", "value", "outputFunction", "onChange", "onChangeCommitted", "minMaxDots", "minMaxValues", "labelAlwaysOn", "step", "disabled", "hideActiveTrack", "ariaLabelledby", "aria-labelledby"];
-var _tokens$entities = slider.entities,
-  track = _tokens$entities.track,
-  handle = _tokens$entities.handle,
-  dot = _tokens$entities.dot;
-var fakeTrackBg = css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
-var fakeTrackBgHover = css({
-  backgroundImage: "url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='".concat(track.states.hover.background, "' width='100%' height='4' rx='2' /></svg>\")")
+const {
+  entities: {
+    track,
+    handle,
+    dot,
+    output
+  }
+} = slider;
+const fakeTrackBg = css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
+const fakeTrackBgHover = css({
+  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
 });
-var trackFill = css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
-var wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
-var RangeWrapper = styled.div.attrs(function (_ref) {
-  var $min = _ref.$min,
-    $max = _ref.$max,
-    $valA = _ref.$valA,
-    $valB = _ref.$valB,
-    $disabled = _ref.$disabled,
-    $hideActiveTrack = _ref.$hideActiveTrack,
-    $labelAlwaysOn = _ref.$labelAlwaysOn,
-    style = _ref.style;
-  return {
-    'data-disabled': $disabled ? true : null,
-    style: _objectSpread({
-      '--a': $valA,
-      '--b': $valB,
-      '--min': $min,
-      '--max': $max,
-      '--showTooltip': $labelAlwaysOn ? 1 : 0,
-      '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
-      '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background
-    }, style)
-  };
-}).withConfig({
+const trackFill = css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
+const wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
+const RangeWrapper = styled.div.attrs(({
+  $min,
+  $max,
+  $valA,
+  $valB,
+  $disabled,
+  $hideActiveTrack,
+  $labelAlwaysOn,
+  style
+}) => ({
+  'data-disabled': $disabled ? true : null,
+  style: {
+    '--a': $valA,
+    '--b': $valB,
+    '--min': $min,
+    '--max': $max,
+    '--showTooltip': $labelAlwaysOn ? 1 : 0,
+    '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
+    '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
+    ...style
+  }
+})).withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:where(:hover,:has(:focus-visible)){> output{--showTooltip:1;}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, function (_ref2) {
-  var $touchNavigation = _ref2.$touchNavigation;
-  return $touchNavigation && css(["& > input[type='range']{pointer-events:none;}& > input[type='range']::-webkit-slider-thumb{pointer-events:auto;}& > input[type='range']::-moz-range-thumb{pointer-events:auto;}"]);
-});
-var Wrapper = styled.div.attrs(function (_ref3) {
-  var $min = _ref3.$min,
-    $max = _ref3.$max,
-    value = _ref3.value,
-    disabled = _ref3.disabled,
-    $hideActiveTrack = _ref3.$hideActiveTrack,
-    $labelAlwaysOn = _ref3.$labelAlwaysOn,
-    style = _ref3.style;
-  return {
-    style: _objectSpread({
-      '--min': $min,
-      '--max': $max,
-      '--value': value,
-      '--showTooltip': $labelAlwaysOn ? 1 : 0,
-      '--background': disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
-      '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background
-    }, style)
-  };
-}).withConfig({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}", ";", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, output.states.hover.background, fakeTrackBgHover, ({
+  $touchNavigation
+}) => $touchNavigation && css(["& > input[type='range']{pointer-events:none;}& > input[type='range']::-webkit-slider-thumb{pointer-events:auto;}& > input[type='range']::-moz-range-thumb{pointer-events:auto;}"]), ({
+  $labelBelow
+}) => $labelBelow && css(["& > output{top:calc(100% + 1px);bottom:unset;}"]));
+const Wrapper = styled.div.attrs(({
+  $min,
+  $max,
+  value,
+  $disabled,
+  $hideActiveTrack,
+  $labelAlwaysOn,
+  style
+}) => ({
+  'data-disabled': $disabled ? true : null,
+  style: {
+    '--min': $min,
+    '--max': $max,
+    '--value': value,
+    '--showTooltip': $labelAlwaysOn ? 1 : 0,
+    '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
+    '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
+    ...style
+  }
+})).withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:where(:hover,:has(:focus-visible)){> output{--showTooltip:1;}}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:var(--background-hover);}}}"], wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover);
-var WrapperGroupLabel = styled.div.withConfig({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::after{background:var(--background-hover);}}", ";}"], wrapperGrid, fakeTrackBg, trackFill, output.states.hover.background, fakeTrackBgHover, ({
+  $labelBelow
+}) => $labelBelow && css(["& > output{top:calc(100% + 1px);bottom:unset;}"]));
+const WrapperGroupLabel = styled.div.withConfig({
   displayName: "Slider__WrapperGroupLabel",
   componentId: "sc-n1grrg-2"
 })(["grid-row:1;grid-column:1 / 3;"]);
-var WrapperGroupLabelDots = styled(WrapperGroupLabel).withConfig({
+const WrapperGroupLabelDots = styled(WrapperGroupLabel).withConfig({
   displayName: "Slider__WrapperGroupLabelDots",
   componentId: "sc-n1grrg-3"
 })(["&:before,&:after{content:' ';display:block;position:absolute;width:", ";height:", ";background:", ";", ";bottom:", ";left:0;}&:after{right:0;left:auto;}"], dot.width, dot.height, slider.background, bordersTemplate(dot.border), dot.spacings.bottom);
-var SrOnlyLabel = styled.label.withConfig({
+const SrOnlyLabel = styled.label.withConfig({
   displayName: "Slider__SrOnlyLabel",
   componentId: "sc-n1grrg-4"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
-  var _ref4$min = _ref4.min,
-    min = _ref4$min === void 0 ? 0 : _ref4$min,
-    _ref4$max = _ref4.max,
-    max = _ref4$max === void 0 ? 100 : _ref4$max,
-    _ref4$value = _ref4.value,
-    value = _ref4$value === void 0 ? [40, 60] : _ref4$value,
-    outputFunction = _ref4.outputFunction,
-    onChange = _ref4.onChange,
-    onChangeCommitted = _ref4.onChangeCommitted,
-    _ref4$minMaxDots = _ref4.minMaxDots,
-    minMaxDots = _ref4$minMaxDots === void 0 ? true : _ref4$minMaxDots,
-    _ref4$minMaxValues = _ref4.minMaxValues,
-    minMaxValues = _ref4$minMaxValues === void 0 ? true : _ref4$minMaxValues,
-    labelAlwaysOn = _ref4.labelAlwaysOn,
-    _ref4$step = _ref4.step,
-    step = _ref4$step === void 0 ? 1 : _ref4$step,
-    disabled = _ref4.disabled,
-    hideActiveTrack = _ref4.hideActiveTrack,
-    ariaLabelledby = _ref4.ariaLabelledby,
-    ariaLabelledbyNative = _ref4['aria-labelledby'],
-    rest = _objectWithoutProperties(_ref4, _excluded);
-  var isNumber = !Array.isArray(value);
-  var isRangeSlider = !isNumber && value.length === 2;
-  var parsedValue = isNumber ? [value] : value;
-  var _useState = useState(parsedValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    initalValue = _useState2[0],
-    setInitalValue = _useState2[1];
-  var _useState3 = useState(parsedValue),
-    _useState4 = _slicedToArray(_useState3, 2),
-    sliderValue = _useState4[0],
-    setSliderValue = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    mousePressed = _useState6[0],
-    setMousePressed = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    touchNavigation = _useState8[0],
-    setTouchNavigation = _useState8[1];
-  useEffect(function () {
+const Slider = /*#__PURE__*/forwardRef(function Slider({
+  min = 0,
+  max = 100,
+  value = [40, 60],
+  outputFunction,
+  onChange,
+  onChangeCommitted,
+  minMaxDots = true,
+  minMaxValues = true,
+  labelAlwaysOn,
+  labelBelow,
+  step = 1,
+  disabled,
+  hideActiveTrack,
+  ariaLabelledby,
+  'aria-labelledby': ariaLabelledbyNative,
+  ...rest
+}, ref) {
+  const isNumber = !Array.isArray(value);
+  const isRangeSlider = !isNumber && value.length === 2;
+  const parsedValue = isNumber ? [value] : value;
+  const [initalValue, setInitalValue] = useState(parsedValue);
+  const [sliderValue, setSliderValue] = useState(parsedValue);
+  const [mousePressed, setMousePressed] = useState(false);
+  const [touchNavigation, setTouchNavigation] = useState(false);
+  useEffect(() => {
     if (isRangeSlider) {
       if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
         setInitalValue(value);
         setSliderValue(value);
       }
     } else {
-      var numberValue = Number(value);
+      const numberValue = Number(value);
       if (numberValue !== initalValue[0]) {
         setInitalValue([numberValue]);
         setSliderValue([numberValue]);
       }
     }
   }, [value, initalValue, isRangeSlider]);
-  var minRange = useRef(null);
-  var maxRange = useRef(null);
-  var onValueChange = function onValueChange(event, valueArrIdx) {
-    var changedValue = parseFloat(event.target.value);
+  const minRange = useRef(null);
+  const maxRange = useRef(null);
+  const onValueChange = (event, valueArrIdx) => {
+    const changedValue = parseFloat(event.target.value);
     if (isRangeSlider) {
-      var _newValue = sliderValue.slice();
-      _newValue[valueArrIdx] = changedValue;
+      const newValue = sliderValue.slice();
+      newValue[valueArrIdx] = changedValue;
 
       //Prevent min/max values from crossing eachother
-      if (valueArrIdx === 0 && _newValue[0] >= _newValue[1]) {
-        var _maxRange$current;
-        _newValue[0] = _newValue[1];
-        (_maxRange$current = maxRange.current) === null || _maxRange$current === void 0 || _maxRange$current.focus();
+      if (valueArrIdx === 0 && newValue[0] >= newValue[1]) {
+        newValue[0] = newValue[1];
+        maxRange.current?.focus();
       }
-      if (valueArrIdx === 1 && _newValue[1] <= _newValue[0]) {
-        var _minRange$current;
-        _newValue[1] = _newValue[0];
-        (_minRange$current = minRange.current) === null || _minRange$current === void 0 || _minRange$current.focus();
+      if (valueArrIdx === 1 && newValue[1] <= newValue[0]) {
+        newValue[1] = newValue[0];
+        minRange.current?.focus();
       }
-      setSliderValue(_newValue);
+      setSliderValue(newValue);
       if (onChange) {
         // Callback for provided onChange func
-        onChange(event, _newValue);
+        onChange(event, newValue);
       }
       return;
     }
@@ -170,25 +156,25 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
       onChange(event, [changedValue]);
     }
   };
-  var handleKeyUp = function handleKeyUp(event) {
+  const handleKeyUp = event => {
     if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
       handleCommitedValue(event);
     }
   };
-  var handleCommitedValue = function handleCommitedValue(event) {
+  const handleCommitedValue = event => {
     if (onChangeCommitted) {
       onChangeCommitted(event, sliderValue);
     }
   };
-  var getFormattedText = function getFormattedText(text) {
+  const getFormattedText = text => {
     return outputFunction ? outputFunction(text) : text;
   };
-  var findClosestRange = function findClosestRange(event) {
-    var target = event.target;
+  const findClosestRange = event => {
+    const target = event.target;
     if (target.type === 'output' || mousePressed) {
       return;
     }
-    var clientX;
+    let clientX;
     if (event.type === 'touchstart') {
       clientX = event.targetTouches[0].clientX;
       setTouchNavigation(true);
@@ -196,15 +182,15 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
       clientX = event.clientX;
       setTouchNavigation(false);
     }
-    var bounds = target.getBoundingClientRect();
-    var x = clientX - bounds.left;
-    var inputWidth = minRange.current.offsetWidth;
-    var minValue = parseFloat(minRange.current.value);
-    var maxValue = parseFloat(maxRange.current.value);
-    var diff = max - min;
-    var normX = x / inputWidth * diff + min;
-    var maxX = Math.abs(normX - maxValue);
-    var minX = Math.abs(normX - minValue);
+    const bounds = target.getBoundingClientRect();
+    const x = clientX - bounds.left;
+    const inputWidth = minRange.current.offsetWidth;
+    const minValue = parseFloat(minRange.current.value);
+    const maxValue = parseFloat(maxRange.current.value);
+    const diff = max - min;
+    const normX = x / inputWidth * diff + min;
+    const maxX = Math.abs(normX - maxValue);
+    const minX = Math.abs(normX - minValue);
     if (minX > maxX) {
       minRange.current.style.zIndex = '10';
       maxRange.current.style.zIndex = '20';
@@ -222,29 +208,30 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
       maxRange.current.style.zIndex = '10';
     }
   };
-  var handleDragging = function handleDragging(type) {
+  const handleDragging = type => {
     if (type === 'mousedown' || type === 'touchmove') {
       setMousePressed(true);
     } else {
       setMousePressed(false);
     }
   };
-  var inputIdA = useId(null, 'inputA');
-  var inputIdB = useId(null, 'inputB');
-  var inputId = useId(null, 'thumb');
+  let inputIdA = useId(null, 'inputA');
+  let inputIdB = useId(null, 'inputB');
+  let inputId = useId(null, 'thumb');
   if (rest['id']) {
-    var overrideId = rest['id'];
-    inputIdA = "".concat(overrideId, "-thumb-a");
-    inputIdB = "".concat(overrideId, "-thumb-b");
-    inputId = "".concat(overrideId, "-thumb");
+    const overrideId = rest['id'];
+    inputIdA = `${overrideId}-thumb-a`;
+    inputIdB = `${overrideId}-thumb-b`;
+    inputId = `${overrideId}-thumb`;
   }
-  var getAriaLabelledby = useCallback(function () {
+  const getAriaLabelledby = useCallback(() => {
     if (ariaLabelledbyNative) return ariaLabelledbyNative;
     if (ariaLabelledby) return ariaLabelledby;
     return null;
   }, [ariaLabelledbyNative, ariaLabelledby]);
   return /*#__PURE__*/jsx(Fragment, {
-    children: isRangeSlider ? /*#__PURE__*/jsxs(RangeWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    children: isRangeSlider ? /*#__PURE__*/jsxs(RangeWrapper, {
+      ...rest,
       ref: ref,
       role: "group",
       "aria-labelledby": getAriaLabelledby(),
@@ -255,21 +242,14 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
       $disabled: disabled,
       $hideActiveTrack: hideActiveTrack,
       $labelAlwaysOn: labelAlwaysOn || touchNavigation,
+      $labelBelow: labelBelow,
       $touchNavigation: touchNavigation,
       onMouseMove: findClosestRange,
       onTouchStartCapture: findClosestRange,
-      onTouchEnd: function onTouchEnd(e) {
-        return handleDragging(e.type);
-      },
-      onTouchMove: function onTouchMove(e) {
-        return handleDragging(e.type);
-      },
-      onMouseDown: function onMouseDown(e) {
-        return handleDragging(e.type);
-      },
-      onMouseUp: function onMouseUp(e) {
-        return handleDragging(e.type);
-      },
+      onTouchEnd: e => handleDragging(e.type),
+      onTouchMove: e => handleDragging(e.type),
+      onMouseDown: e => handleDragging(e.type),
+      onMouseUp: e => handleDragging(e.type),
       children: [minMaxDots && /*#__PURE__*/jsx(WrapperGroupLabelDots, {}), /*#__PURE__*/jsx(SrOnlyLabel, {
         htmlFor: inputIdA,
         children: "Value A"
@@ -285,15 +265,12 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
         "aria-valuetext": getFormattedText(sliderValue[0]).toString(),
         id: inputIdA,
         step: step,
-        onChange: function onChange(event) {
+        onChange: event => {
           onValueChange(event, 0);
         },
-        onMouseUp: function onMouseUp(event) {
-          return handleCommitedValue(event);
-        },
-        onKeyUp: function onKeyUp(event) {
-          return handleKeyUp(event);
-        },
+        onMouseUp: event => handleCommitedValue(event),
+        onTouchEnd: event => handleCommitedValue(event),
+        onKeyUp: event => handleKeyUp(event),
         disabled: disabled
       }), /*#__PURE__*/jsx(Output, {
         htmlFor: inputIdA,
@@ -316,15 +293,12 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
         id: inputIdB,
         step: step,
         ref: maxRange,
-        onChange: function onChange(event) {
+        onChange: event => {
           onValueChange(event, 1);
         },
-        onMouseUp: function onMouseUp(event) {
-          return handleCommitedValue(event);
-        },
-        onKeyUp: function onKeyUp(event) {
-          return handleKeyUp(event);
-        },
+        onMouseUp: event => handleCommitedValue(event),
+        onTouchEnd: event => handleCommitedValue(event),
+        onKeyUp: event => handleKeyUp(event),
         disabled: disabled
       }), /*#__PURE__*/jsx(Output, {
         htmlFor: inputIdB,
@@ -333,20 +307,18 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
       }), minMaxValues && /*#__PURE__*/jsx(MinMax, {
         children: getFormattedText(max)
       })]
-    })) : /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    }) : /*#__PURE__*/jsxs(Wrapper, {
+      ...rest,
       ref: ref,
       $max: max,
       $min: min,
       value: sliderValue[0],
-      disabled: disabled,
+      $disabled: disabled,
       $hideActiveTrack: hideActiveTrack,
       $labelAlwaysOn: labelAlwaysOn || touchNavigation,
-      onTouchStartCapture: function onTouchStartCapture() {
-        return setTouchNavigation(true);
-      },
-      onMouseDownCapture: function onMouseDownCapture() {
-        return setTouchNavigation(false);
-      },
+      $labelBelow: labelBelow,
+      onTouchStartCapture: () => setTouchNavigation(true),
+      onMouseDownCapture: () => setTouchNavigation(false),
       children: [/*#__PURE__*/jsx(SliderInput, {
         type: "range",
         value: sliderValue[0],
@@ -358,17 +330,14 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
         "aria-valuetext": getFormattedText(sliderValue[0]).toString(),
         step: step,
         id: inputId,
-        onChange: function onChange(event) {
+        onChange: event => {
           onValueChange(event);
         },
         disabled: disabled,
         "aria-labelledby": getAriaLabelledby(),
-        onMouseUp: function onMouseUp(event) {
-          return handleCommitedValue(event);
-        },
-        onKeyUp: function onKeyUp(event) {
-          return handleKeyUp(event);
-        }
+        onMouseUp: event => handleCommitedValue(event),
+        onKeyUp: event => handleKeyUp(event),
+        onTouchEnd: event => handleCommitedValue(event)
       }), /*#__PURE__*/jsx(Output, {
         htmlFor: inputId,
         value: sliderValue[0],
@@ -380,7 +349,7 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
           children: getFormattedText(max)
         })]
       })]
-    }))
+    })
   });
 });
 

package/dist/esm/components/Slider/Slider.tokens.js

@@ -1,22 +1,57 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors = tokens.colors,
-  _tokens$colors$ui = _tokens$colors.ui,
-  backgroundColor = _tokens$colors$ui.background__light.rgba,
-  backgroundColorDefault = _tokens$colors$ui.background__default.rgba,
-  backgroundColorMedium = _tokens$colors$ui.background__medium.rgba,
-  _tokens$colors$intera = _tokens$colors.interactive,
-  indicatorColor = _tokens$colors$intera.primary__resting.rgba,
-  primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
-  primaryHover = _tokens$colors$intera.primary__hover.rgba,
-  focusOutlineColor = _tokens$colors$intera.focus.rgba,
-  backgroundColorDisabled = _tokens$colors$intera.disabled__fill.rgba,
-  backgroundBorderDisabled = _tokens$colors$intera.disabled__border.rgba,
-  textColor = _tokens$colors.text.static_icons__tertiary.rgba,
-  paragraph = tokens.typography.paragraph,
-  focusOutlineWidth = tokens.interactions.focused.width;
-var slider = {
+const {
+  colors: {
+    ui: {
+      background__light: {
+        rgba: backgroundColor
+      },
+      background__default: {
+        rgba: backgroundColorDefault
+      },
+      background__medium: {
+        rgba: backgroundColorMedium
+      }
+    },
+    interactive: {
+      primary__resting: {
+        rgba: indicatorColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      primary__hover: {
+        rgba: primaryHover
+      },
+      focus: {
+        rgba: focusOutlineColor
+      },
+      disabled__fill: {
+        rgba: backgroundColorDisabled
+      },
+      disabled__text: {
+        rgba: textColorDisabled
+      },
+      disabled__border: {
+        rgba: backgroundBorderDisabled
+      }
+    },
+    text: {
+      static_icons__tertiary: {
+        rgba: textColor
+      }
+    }
+  },
+  typography: {
+    paragraph
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
+  }
+} = tokens;
+const slider = {
   background: backgroundColorDefault,
   entities: {
     track: {
@@ -46,9 +81,22 @@ var slider = {
       }
     },
     output: {
-      typography: _objectSpread(_objectSpread({}, paragraph.caption), {}, {
+      background: indicatorColor,
+      typography: {
+        ...paragraph.caption,
         color: textColor
-      })
+      },
+      states: {
+        hover: {
+          background: primaryHover
+        },
+        disabled: {
+          background: backgroundColorDisabled,
+          typography: {
+            color: textColorDisabled
+          }
+        }
+      }
     },
     handle: {
       background: backgroundColorDefault,