diff --git a/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx b/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx
index 0d389d7ba46..ead8dbfbf83 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'
export function SliderThumb() {
- const {
- values,
- thumbIndex,
- isVertical,
- showStatus,
- attributes,
- allProps,
- } = useSliderProps()
+ const { values } = useSliderProps()
+
+ return (
+ <>
+ {values.map((value, i) => {
+ return
+ })}
+ >
+ )
+}
+
+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 humanNumber = getHumanNumber(value, numberFormat)
+
+ const [hover, setHover] = React.useState(false)
+ const onMouseEnterHandler = () => {
+ setHover(true)
+ }
+ const onMouseLeaveHandler = () => {
+ setHover(false)
+ }
+
const {
onThumbMouseDownHandler,
onThumbMouseUpHandler,
@@ -68,54 +98,49 @@ 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 (
-
-
-
-
-
-
-
- )
- })}
+
+
+
+
+
+
+ {String(value)}
+
+
>
)
}
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/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 (
<>
-
- Tooltip
-
{
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;