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 ( - - - - -