From 9cd17213a07fb263902ca779eb96febbe09a2dba Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Thu, 25 Aug 2022 11:49:30 +0200
Subject: [PATCH] feat(Slider): add toolbar on active thumb button

---
 .../src/components/slider/SliderHelpers.tsx   |  11 +-
 .../src/components/slider/SliderInstance.tsx  |  16 +-
 .../src/components/slider/SliderThumb.tsx     | 141 +++++++++++-------
 .../__tests__/Slider.screenshot.test.js       |   6 +-
 .../__snapshots__/Slider.test.tsx.snap        |   9 +-
 ...to-match-the-active-state-1-f1077.snap.png | Bin 2358 -> 5352 bytes
 ...-to-match-the-focus-state-1-1e3c0.snap.png | Bin 2974 -> 5007 bytes
 ...-to-match-the-hover-state-1-40b49.snap.png | Bin 2974 -> 5007 bytes
 .../slider/stories/Slider.stories.tsx         |  18 +--
 .../src/components/slider/style/_slider.scss  |  13 +-
 10 files changed, 128 insertions(+), 86 deletions(-)

diff --git a/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx b/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx
index e08d55cc084..12e66d1d0a4 100644
--- a/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx
+++ b/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx
@@ -126,19 +126,16 @@ export const formatNumber = (
   return value
 }
 
-export const getHumanNumber = (
+export const getFormattedNumber = (
   value: number,
   numberFormat: formatOptionParams
 ) => {
-  const num = value as number
-  const { aria: humanNumber } = (
+  return (
     numberFormat
-      ? formatNumber(num, {
+      ? formatNumber(value as number, {
           ...(numberFormat || {}),
           returnAria: true,
         })
-      : { aria: null }
+      : { aria: null, number: null }
   ) as formatReturnValue
-
-  return String(humanNumber || value)
 }
diff --git a/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx b/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx
index 14d395140ab..c7006bc3e4f 100644
--- a/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx
+++ b/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx
@@ -26,7 +26,7 @@ import {
 } 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)
@@ -158,7 +158,7 @@ function SubtractButton() {
     subtractParams['aria-hidden'] = attributes['aria-hidden']
   }
 
-  const humanNumber = getHumanNumber(value as number, numberFormat)
+  const humanNumber = getFormattedNumber(value as number, numberFormat)
 
   return (
     <Button
@@ -166,7 +166,10 @@ function SubtractButton() {
       variant="secondary"
       icon="subtract"
       size="small"
-      aria-label={subtractTitle?.replace('%s', humanNumber)}
+      aria-label={subtractTitle?.replace(
+        '%s',
+        humanNumber.aria || String(value)
+      )}
       on_click={onSubtractClickHandler}
       disabled={disabled}
       skeleton={skeleton}
@@ -190,7 +193,7 @@ function AddButton() {
     addParams['aria-hidden'] = attributes['aria-hidden']
   }
 
-  const humanNumber = getHumanNumber(value as number, numberFormat)
+  const humanNumber = getFormattedNumber(value as number, numberFormat)
 
   return (
     <Button
@@ -198,7 +201,10 @@ function AddButton() {
       variant="secondary"
       icon="add"
       size="small"
-      aria-label={addTitle?.replace('%s', humanNumber)}
+      aria-label={addTitle?.replace(
+        '%s',
+        humanNumber.aria || String(value)
+      )}
       on_click={onAddClickHandler}
       disabled={disabled}
       skeleton={skeleton}
diff --git a/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx b/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx
index 0d389d7ba46..92e2f20e6b9 100644
--- a/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx
+++ b/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx
@@ -5,19 +5,31 @@ import {
   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,
-    thumbIndex,
-    isVertical,
-    showStatus,
-    attributes,
-    allProps,
-  } = useSliderProps()
+  const { values } = useSliderProps()
+
+  return (
+    <>
+      {values.map((value, i) => {
+        return <Thumb key={i} value={value} currentIndex={i} />
+      })}
+    </>
+  )
+}
+
+type ThumbProps = {
+  value: number
+  currentIndex: number
+}
+
+function Thumb({ value, currentIndex }: ThumbProps) {
+  const { thumbIndex, isVertical, showStatus, attributes, allProps } =
+    useSliderProps()
 
   const {
     id,
@@ -31,6 +43,24 @@ export function SliderThumb() {
     numberFormat,
   } = allProps
 
+  const index = thumbIndex.current
+  const percent = clamp(((value - min) * 100) / (max - min))
+
+  const style = {
+    zIndex: index === currentIndex ? 4 : 3,
+    [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,
+  } as React.CSSProperties
+
+  const { number, aria } = getFormattedNumber(value, numberFormat)
+
+  const [hover, setHover] = React.useState(false)
+  const onMouseEnterHandler = () => {
+    setHover(true)
+  }
+  const onMouseLeaveHandler = () => {
+    setHover(false)
+  }
+
   const {
     onThumbMouseDownHandler,
     onThumbMouseUpHandler,
@@ -68,54 +98,51 @@ export function SliderThumb() {
 
   return (
     <>
-      {values.map((value, i) => {
-        const index = thumbIndex.current
-        const percent = clamp(((value - min) * 100) / (max - min))
-
-        const style: React.CSSProperties = {
-          zIndex: index === i ? 4 : 3,
-          [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,
-        }
-
-        const humanNumber = getHumanNumber(value, numberFormat)
-
-        return (
-          <React.Fragment key={i}>
-            <span className="dnb-slider__thumb" style={style}>
-              <input
-                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}
-              />
-
-              <Button
-                element="span"
-                type=""
-                variant="secondary"
-                disabled={disabled}
-                skeleton={skeleton}
-                data-index={i}
-                onMouseDown={onThumbMouseDownHandler}
-                onMouseUp={onThumbMouseUpHandler}
-                {...thumbParams}
-              />
-            </span>
-          </React.Fragment>
-        )
-      })}
+      <span
+        className="dnb-slider__thumb"
+        style={style}
+        onMouseEnter={onMouseEnterHandler}
+        onTouchStart={onMouseEnterHandler}
+        onMouseLeave={onMouseLeaveHandler}
+        onTouchEnd={onMouseLeaveHandler}
+      >
+        <input
+          type="range"
+          className="dnb-slider__button-helper"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          disabled={disabled}
+          onChange={onHelperChangeHandler}
+          onFocus={onHelperFocusHandler}
+          onFocusCapture={onMouseEnterHandler}
+          onBlurCapture={onMouseLeaveHandler}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={value}
+          aria-valuetext={aria ? aria : undefined}
+          aria-orientation={isVertical ? 'vertical' : 'horizontal'}
+          data-index={currentIndex}
+          {...helperParams}
+        />
+
+        <Button
+          element="span"
+          type=""
+          variant="secondary"
+          disabled={disabled}
+          skeleton={skeleton}
+          data-index={currentIndex}
+          onMouseDown={onThumbMouseDownHandler}
+          onMouseUp={onThumbMouseUpHandler}
+          {...thumbParams}
+        />
+
+        <Tooltip active={hover} omit_portal>
+          {number || value}
+        </Tooltip>
+      </span>
     </>
   )
 }
diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/Slider.screenshot.test.js b/packages/dnb-eufemia/src/components/slider/__tests__/Slider.screenshot.test.js
index ba7e8edb5a3..41a735203ab 100644
--- a/packages/dnb-eufemia/src/components/slider/__tests__/Slider.screenshot.test.js
+++ b/packages/dnb-eufemia/src/components/slider/__tests__/Slider.screenshot.test.js
@@ -21,7 +21,7 @@ describe('Slider screenshot', () => {
 
   it('have to match the focus state', async () => {
     const screenshot = await testPageScreenshot({
-      style: { width: '20rem' },
+      style: { width: '20rem', 'padding-top': '3rem' },
       selector: '[data-visual-test="slider-default"] .dnb-slider__wrapper',
       simulateSelector:
         '[data-visual-test="slider-default"] .dnb-slider__thumb .dnb-slider__button-helper',
@@ -32,7 +32,7 @@ describe('Slider screenshot', () => {
 
   it('have to match the hover state', async () => {
     const screenshot = await testPageScreenshot({
-      style: { width: '20rem' },
+      style: { width: '20rem', 'padding-top': '3rem' },
       selector: '[data-visual-test="slider-default"] .dnb-slider__wrapper',
       simulateSelector:
         '[data-visual-test="slider-default"] .dnb-slider__thumb .dnb-slider__button-helper',
@@ -43,7 +43,7 @@ describe('Slider screenshot', () => {
 
   it('have to match the active state', async () => {
     const screenshot = await testPageScreenshot({
-      style: { width: '20rem' },
+      style: { width: '20rem', 'padding-top': '3rem' },
       selector: '[data-visual-test="slider-default"] .dnb-slider__wrapper',
       simulateSelector:
         '[data-visual-test="slider-default"] .dnb-slider__thumb .dnb-slider__button-helper',
diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
index 53475899c77..73de36b1ae1 100644
--- a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -812,7 +812,8 @@ legend.dnb-form-label {
     left: 0;
     top: 0;
     z-index: 3;
-    display: block;
+    display: flex;
+    justify-content: center;
     transform: translate3d(-50%, 0, 0);
     border-radius: 50%; }
     .dnb-slider__button-helper,
@@ -872,6 +873,12 @@ legend.dnb-form-label {
     margin-top: 0.5rem; }
   .dnb-slider--vertical .dnb-form-status {
     margin-top: 1rem; }
+  .dnb-slider .dnb-tooltip {
+    top: -3rem;
+    transition: opacity 400ms ease; }
+    .dnb-slider .dnb-tooltip__content {
+      min-width: 0;
+      white-space: nowrap; }
   @media screen and (max-width: 40em) {
     .dnb-responsive-component .dnb-slider {
       display: flex;
diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-active-state-1-f1077.snap.png b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-active-state-1-f1077.snap.png
index 8e6eca49332c2a4ee31e4dfe1ce181fadddf9359..cdbcc107863c7146656ebba45aa19e105210e17c 100644
GIT binary patch
literal 5352
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
W{*C_PeQxm6C7`XYul7j=9{oQ%(j`Fv

literal 2358
zcmV-63CZ?}P)<h;3K|Lk000e1NJLTq00CeC002M;1^@s6B)YB600001b5ch_0Itp)
z=>Px-@JU2LRCt{2-NA3$)&U0akECQvw$VsV(5~`^IzzBsB-B7*_f#Xf#K*|T-kcrX
zL;MF6t2g-G<WL_M_b;$|TAh>Oo+@F02l29@SXFFt(QT2G)sbw=(%V6%B2%PDilj)%
z-w!ZEQZ)G#grA=t-+PpV5CTL*G;(s#1t222sTjaSL;+y{6A=Z30Zc>`5C$+2Q9u~L
zL_`5$022`fgaJ%M6c7e55m7)Gz(hm=VE_{m1%v@iL==!n&;=lxM8nQ;B}tOUC8025
z026t{i-`q$kHIjWd<<YB7yO*fm0>*j7{EkB8Wg@l2($sz+fDqhd5(*A3m5Gcn(a0K
zAS%n4k`+wJ3f_uNV^*1hB!p?uiUIG@_>wpwJCQSHmyEXkQV9I};x(!lXO51WoQmP?
zsaZs>g4Qf>8N`!=0Zin8(dD9TYXkVtMIHY=ue&<OJF!{JN8{ZtN=AXp5S|PSU?Lj^
z1uxJE-|y=+oV6}JIbTeP;O<P~T0c<+@#OI}fJ>DMzEV}>R28*G1IH&P0Dz@b3W<0e
z*>oC@(rGNt&-+ybBG;_K_q^T0Kk7BKJ-(D=Ny4vZ5}1~i?ly+7cfycQz65ZoQo$cy
zyug03h>hiC+`o4ZOQ}@%gOn;29G{#ZS1cl@s#wot@Y%zM3}Ol;{UxHW`Tp(nrRU+R
zktGSgox44-Cd>eKCQSL{c>w2B6;Jl}@pxqgTdS)`#Nz|^uQeKYdUS;6`8=MjuOpjI
zds!SJR|bV|O9+%2uRLpZFcVWESd8C-(i5}{;o*cWpF9oVy+Q$7xf~8RH?g#^;OKXc
z%Vpf(-Nn;v78}dUUKNRGXoJF62!Wq2>Ueq47)e>)o}R^>XzW_hGK8H8V?KEnz}kl^
zefp{8UllX8MgxmGJJ|d9W7dQzP*&l4DFpuhx-!x-{bqI^5lLbQ4<W4i<jG__rAh^#
zef>2KH#dj=Z~%~q$8os1i6{H}C{;%LpPR^xK74^rce7E`&S_L0GG{lR_6h|&JvuUd
z-;aFqB!IUM4)Azo#c{RX$kM_B9<Qum`{2NXk`Xy)7I4~fO9)h(&IVa{q1rq{>#7V^
zWu!Ok=F?t2k6f`ha38Pp$#npiDi!2Z6<e#TUX%v_u(i61oT{=GOe1GC%1sD?daF6g
zB3)B&HLsP$2t)Xdu;-KO0M4l@HkOxNH9hEQeeiOs>e(@goH7ft(*Oh5?A#1pV`0xH
z_W@ii;{LsRt_z}<&15XU4iJrkzQ%dcZUt5r?c7$iVCo2aKDnL^?T2a=OR1FWg6J(K
zlX!Jz-Ojf6mjeEH@B-hzWOD_%WEN(<(?SCH^VTL(iCd#7lg^K?f5xlxH(lSP0lgw7
zxktpbtl*v49BxIY2ksYiK3Q=cz@=)nZ-mHRp@1(71xLqululo3r&(H9=nf4WgyBoR
z(uFU8z`_>*-ipO=d3k-{$4#87^1R)`PiLo=0c@5}d-;6dzu8}}^5((rZr^c+%_l3q
z%m-X+H2Bqs$S*<wSK)CJ!`H1^qw@`-udlcEI>PL79l-A;lPFax*Z#_Et**Mh>v&u)
z<9!=n9e%&|khNfP&*-8vsQm)KN$pi&wcwu{=ZHu8Z{27?+#AS~9L`!3gcT?GbpMMl
z004)dd}4WAyZL0rbpS6WlQ=#(@qD6+QniXiEM~di#s|yT_<%!~$sMD<v}UjWJU_+j
zfO<mwVr~w<n(hRT7OrNm`sJG_=zOx`x)($?lfmJ4-?=V`UanX~Hk0xExI}IUArO^3
z8NW1?s3fy_&w;S#lluTpr}1T>&}~=oLaoujSE|bSASiG~VK=8l11O34xf#gj!k$mA
z19)+M9*@%Lfn%thdU|xkiP|Z&Vv=ILlTT&>Joh*Xdp>zH7sT2cp6By8E|*;&>$qIT
z^L!rLYik~qjL3U3fJ9_)_a{FDan4C#H=nYZjAgTe*ZJg0058tZ<JtN;9_;SAs_NGo
z4LsQ0#k2Kw)_y6}lJeAzIOim=n@?7~xBSQ_&+aB<(`kI3&EoFP&QLYs<8m2ycXsf3
zHp{kO3cZLV;ZD@M`30=piN?E+t0(8enoqtxlIV9IeuyU@ePrvAAJ4w|27mhYTRxJA
z0%O(<O~1YOrzHeVE*m&&`}{~EIf7Iq4&`dtaqo|&cb(nP%!MtVe0wP8_Q65tPGKg4
zY&wnilF9CToX6!deyCQFQ&r@OMLbHUvAwp&W(Nw)FaZo)Js0lc6m9s^6G4WA#i_aO
z^WYf3?u99ze19yx_91F#XWg;Z@265o#A4kK&)}t?4I98fXI_GTHS3;-unY;mjL!5u
zmYxCZjWFbsuK`RnF6@qkGh1#6fgf9Eo;63r<OtqXV%=s3pg&|e5^nqjH>8JX44DO*
zB1w2xiQ#s{{qWS=kytl;os@yb4{N|guvY`tmW`SruC)sTsEH<Om*<YkkcdnpAw{7z
zIGELP&E^1R4S4)8fQhcyZ3ph%ZWhi!=LTI<2I``Prf8!jM7N0|CP$!15~7lf8A(C3
z4Z|C48vQo5|4s&9<^v|0B-%8O`en0qjRHUsz_d_0YZ3rOH<&^I5+pz}uEAQZGi1jb
z1DI$4eZcl^2VfY+Mz40xWAxhlzS(gY!sCkpOmxL=O;^7Rpl{uXKF9~P<MwX1`^-1i
zjK>cHn8<>@MyqWDu0M6ctTwFQPk(HqWo_N4+gb0v4BGL=046eF*8I@>KF}Yoc51`=
zV;F5S3tzj(q3~lb2qGP$UJt#?eGhZg4azXu$1XeJYt`d{VLUz<z(fXy31PGMtu8UU
zeR|EdGknJvn;?iR7~Oy~yGb`p06M+N#=xB%tN|05FstSEE*o7wPHMjzt5CHQz6|5>
z!vH24z)lDo?Ps=a5GTDP7`~H%0Ze4UO$fWe@SS{Y1156FNq^vBk8iYWv`*uVHDDqe
z>^3nB(-dLV^x$+GjSmJekpo_Zt{DdJ&B6dCa>(qG@v{xs&UP9<3}B)m4Z3u^tO473
ckH*vg0i=zp%rnPP8vp<R07*qoM6N<$g75upegFUf

diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-focus-state-1-1e3c0.snap.png b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-focus-state-1-1e3c0.snap.png
index 92b5979ba6e740b37c8f999f11f11a50d9e2751e..e463b571a24c2f1440c2e151cab9a7632952b415 100644
GIT binary patch
literal 5007
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
Kv=N#P3I7ASv$^U3

literal 2974
zcma)8`9IWO7ysC0%~FIAzB6QJL=ur9OOrjju~(+3K|{6&*%Dc@g(>?!MAoqsnTn7l
zyHJdMD>IlGo=@NBA9#K__rC7y-m|^WJ?9;7hA`x06Ji4ZfYa!Pz6Ai#A;JAMR%TF2
zwN?*+3mw|RP!FgX5LpEPc3UHTT`NrP=4`lW+GBdcF1MvBW`a#{=*o-t3T3bFGZT>r
zz5+Xm5t{C|6byxDR-wtkwqWbQgKUax9;$D7wmdVDW<0tShI%YL>H&3oo9M3FbXNUA
zbwQI;%_pVoB{tH0dHy0gyldp;Uc;?vqKy3hZ)4W|yFvN5z9Z85c<Epo#3+?fLLw)y
zNh%o7*H@Qi&We-P6+}uDFuF#>$MHtfK_rY%|38Nwfdwqr(i7a;d#&y5a|R^ec=Q5%
zt5O=RnTCenymX#7ZjJ0DB{a(=__ZDZK<}c2$0>R?;*u-ePUgFf!gU+3<)Tof-g3p~
znT1jbdBfAhtZL!yrgw$wC|@gzeM=F?pq6dyOOs5~pd@9)O%5gV#K<3-PTm8H>ah;A
z1vOTB8#$To){3@=hRzCXzxVtIcrBposmX&sZL`huqCLtE>WKW!r?>g(qPdhMbAttu
z1=2F@o{e~#sP@_lBf!7B<o1NdOhs7-SW#%Tg?vwPl3)M0$_gATwNmPyj7VBK6Hb?M
zF=t7$8L#7Ckv2Ylo<l3K(l?Id2x;6^WB!TiC&7%{qF1<Z(r#c(+7rjHw<@a8_81-n
zC+IC>`W&QNQqs1Q5}@G}3O=mL5OBSyFua7}x-Hh9VSs`2fH`Tv|IvEu+jjrUy5M5A
zd<|V-ke0@p|A#eyw+Z6)!H>^?h&^hEhqp%;3Rdv_j{fdU%dQZ8ikGo3k5Q^w)4Fx;
z##I*ghdfnRT(VS5#@6;$r2E^PpN@>hp7AWcGkX~6=67ykLh3qpkr$ash;o7=UXLww
zEq^htx+tR?6xMN~zPN`OLhnjcaj{e(plha(4afSJ3nfMT)Uzp4ryS<OxWf-A-k|p#
zAwJlx-Iq?H=Re-UPBG)87X^IAUq2ivw2bTn458UaMNcBC5zxlQ#>Kjdi>S&PgFpj=
ziE(a9$i(<$eAFdj()ieW6m0FXh{VnG#p!@$x$oOyPGrwmGx|(Pd*@(L*-Qo3X!mqf
zXpU!{tz7Wt#*5h`D7Tmah3^*99nLgN>^G-n|GA8=tteuwG%-eMV@~U+2%0&Yy&iuN
z=T^e+0!$o{o~($8^q6q__OyO!`>CCDI5~On<K6m-=Jc~LviK!LuG4!~L#PZzYW3Ia
zuMp48i3^<ZZv7NNUbu`8fvbFMVaUf;U%BPs&)y<jU7hk>6w37I0R1Z6;pBzYw_49B
z0x02Ms>5%rQKuHfZtZ9o*}WwhWj@<&))L*&3KKcc$ys4}<o8xpW$4>bM0ItwUyxQX
z$MYMiGDrw@tL_reRlhG>5-PH%Ocr^t>zjt*O{=&;@&ELI&@nLZVvtaHtCewLcrJ-h
zQQ@DRlPSPI59ZQ#YC1shocSO6!m|e$j0a<B@L;z%>#=9VYQsZoHIB##%XXr&mP&z!
z0dvs5+PtF17Fa1l?UbU+T?)x8Hl=*i75fyiM-BmMAjaPBVVinPrm0d50pX_r+m;5D
zW-Kf|WTSCQu{-Hy?>|qlFqR3h{?MMqCB?DGy~`MzQp=`LUbw7=$9>WWpd^2?b2cGl
zBTZM}$kqQPc)x*VVxg-dmG>*dDX&Y}RwtU*VCR1|2YoaLc3jM$Jipw@ZL@%&v)bo5
z=+|+EEny)&u=1Aw!zerO`TdgYZ7Y|@D-Gvy4cM;ElkO$9VQH&=NTavQ9`aJe2Ye6H
zL7*-GI0_vqc8DH}-o1M_4WYxnuQ4_g+$Yz6tCQ0X{eY9ws!uk0z6`X*#FT{S{Q?Vz
zdxKO)vh;x=>`P@7rFX(%N+P|Pix<Ve)Z?63l)~QC>!;}a*~J};%?YPU75k%JI<_mv
zY~vEkm^G}hT$3ov<5x8I0`<yQIVBs=@7m?@edm>9LbZ>_;_e8|B<_ygn;<g0-q964
zq`(?Y&=JobJ(}OcKxi`c)vflwJ2goh9P>4-$7?%}z6uRQ8eJ(?cbeb)58#Ns%3hC4
ze)HpMR;^uah)E$<?qIiQ^HCf_RPL9D8JXgv`Xi;*zU@rF3T91ajAk$eRm)*;%uS2R
ze<l#nY4+6T4(sIVY6Wf@U&Z?>(|Ro!)p{tMXCh1urEQJ-RgkrgX1Ai5Y&(2<sneWF
zo?jVuy6t^;$nymC!hbVVFWwK~)9j$x{Js`xcb+TjCS;au!e7bM^7C7}-{-tq<xhkR
zg5JXaFul{m64(~*1n2J77E991!>b7W<2c`s`Ix%Ptt(Rh7<y0R*uBr44s+37<1eyw
z3i($A-Wj-044N7GxOhVqM-fKEW6v`{M2+gV*-hJ9d$GE|>dY|U-Ow5)bIT~OCj>Jy
z!?r8EkpRp6OSbp!`3s&)2?Kj*9p0Y@U$D|iNAyokZo&JT&nN)c1c}YGNe>Gro1r%F
zmo#Ix95-;4-D@R~o0c?JEH?;MZD&nVy^FE&AgYW3z)yyFOeM>US&A~iA;a3`dF^MC
zwO4tO$dGDJ++^YvVPW^2Q)CdQfnI|RwO1`96QlLHw-$1WPSIeiAi<i-P9hNC0*-{Z
zrQ&CPzILk(=hdyHe6arQk_JJ#bjHL%LJ7A{G<nTBok*;74hWkdb_-*}5{TNzg4?6x
z?(R(EjnXY=mX`|->lHK{Lz{6_h5o*Qr1jn08f~rL$8?VEft*jU2baO&#jg|DKQi>e
zq*wdnW=U=aiL@Io1ItEU5;9Lu``Ib#J=g^t#l#>3G+hHU%zR)UEG)Y{S&XyHh;%Hz
znVrtZ-B`c*9_ZgTeQ%1pyGKpv&+-|#6$}NAzukiz%FdTUZi;&!K!9W)@sp>A`#R$n
zWN%Zk?>c04#K4L={-M=v5`Xr7#6L!QG#}sj-{_O*x@J~GdBrtRSDbXg_hHu3O71=r
zfj2<}blPGc;FHD?n&1-=@0D;v`;>s7hf%6ukUu|n#}RWdr87$RwBP8SM55;Gg~`>m
z>zh4!FZ$R7=6Bc!FUYE*Ej+G=(kId7Uj{jcz9{mrjk<IOuGK*%A1qSU!3gq0kn-S+
z9fxIH{VI<k`rhA3kl3=rpJvIQqmL3d%|2A=QWaw`js8S0r^7`}-K74+J_KV2dKGUU
zqG&N?+rngXL+BhzI}*eZnBP?+yN*k8({-h1<19SR&1c8bL2^#7YWmHSx`>GV{BB=|
zs=t;2AW9s$G^|opi5Gs{-v`D(HQ`6x7Q+|Bv1iU`cx@YuXFH!f4gBj$r?YRqf2&>D
zr0+c1cv_}Kxl5nVEt^TUec5XJGPP#EOs6NM)q7WuT2b>|%(*yQ-n+B>>0h&Jq^)oL
zkqp@12@*-zV>T@IO7b={%fgw^mCX|_z|5u@V7|b>{s;|z0Oc(gn*|plQ@VHay?U2o
zqV!)YbOm`#EIM5K_3xAEmTZ{~RW<Orw33YGnbbJxmyC0F^^(elouKp#!mG0~AK<Dv
z2gCh60N>Nof-`1=43<BIMDD(GkDfYvu_I+GHdQQBJT5ZYft_m(a-uo&2o95o$4#X&
zxND)6y7bxH;{D2qV{>jPHR~}`0|x_+j*;RPJb02YUQ`5sHG@`pm5Ztt^-5EN0m61+
zR8D=TZg?7+Gl?^muSn_1RL&0q`IeGIeC_bM-hFmxPQ8@ikI^oGuY8EtRUX_D)Id50
zM{E04QEmrU{qf0}1QjJ*D>C7zlY^JZU)67W?)5MC3Wlrm$B>sl0DN$nQ3puAPge@6
p^e>1B=FLq>`Kt3b@(Z(9PtegFS$%KV9YMkk7{L+xHG0U%{{oh)wf_JB

diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-hover-state-1-40b49.snap.png b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/slider-screenshot-test-js-slider-screenshot-have-to-match-the-hover-state-1-40b49.snap.png
index 92b5979ba6e740b37c8f999f11f11a50d9e2751e..e463b571a24c2f1440c2e151cab9a7632952b415 100644
GIT binary patch
literal 5007
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
Kv=N#P3I7ASv$^U3

literal 2974
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

diff --git a/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx b/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx
index 586df57640a..a3a079f14a9 100644
--- a/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx
+++ b/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx
@@ -7,14 +7,7 @@ import React from 'react'
 import { Wrapper, Box } from 'storybook-utils/helpers'
 import styled from '@emotion/styled'
 
-import {
-  Slider,
-  ToggleButton,
-  Input,
-  FormRow,
-  FormLabel,
-  Tooltip,
-} from '../../'
+import { Slider, ToggleButton, Input, FormRow, FormLabel } from '../../'
 
 import '../../slider/style/dnb-range.scss'
 
@@ -50,12 +43,13 @@ export function MultiButtons() {
   return (
     <>
       <FixedSizeWrapper>
-        <Tooltip active show>
-          Tooltip
-        </Tooltip>
         <Slider
-          label="Label2:"
+          top="x-large"
+          // multiThumbBehavior="push"
+          multiThumbBehavior="omit"
+          label="Label:"
           value={value}
+          step={1}
           stretch
           numberFormat={{ decimals: 2, currency: true }}
           onChange={({ value, number }) => {
diff --git a/packages/dnb-eufemia/src/components/slider/style/_slider.scss b/packages/dnb-eufemia/src/components/slider/style/_slider.scss
index ba6cb418712..1ff85acd336 100644
--- a/packages/dnb-eufemia/src/components/slider/style/_slider.scss
+++ b/packages/dnb-eufemia/src/components/slider/style/_slider.scss
@@ -157,7 +157,8 @@
     top: 0;
     z-index: 3;
 
-    display: block;
+    display: flex;
+    justify-content: center;
     transform: translate3d(-50%, 0, 0);
 
     // Because of the DropShadow
@@ -241,6 +242,16 @@
     margin-top: 1rem;
   }
 
+  .dnb-tooltip {
+    top: -3rem;
+    transition: opacity 400ms ease;
+
+    &__content {
+      min-width: 0;
+      white-space: nowrap;
+    }
+  }
+
   .dnb-responsive-component & {
     @media screen and (max-width: 40em) {
       display: flex;