@dnb/eufemia/components/slider/SliderMarker.js

DNB Eufemia Design System UI Library

import { useMemo } from 'react';
import useId from "../../shared/helpers/useId.js";
import { useSliderProps } from "./hooks/useSliderProps.js";
import { clamp, getFormattedNumber } from "./SliderHelpers.js";
import Tooltip from "../tooltip/Tooltip.js";
import { jsx as _jsx } from "react/jsx-runtime";
export default function SliderMarker({
  value,
  text
}) {
  const {
    isReverse,
    isVertical,
    allProps
  } = useSliderProps();
  const {
    min,
    max,
    numberFormat
  } = allProps;
  const markerId = useId();
  const params = useMemo(() => {
    const {
      number,
      aria
    } = getFormattedNumber(value, numberFormat || {});
    let percent = clamp((value - min) * 100 / (max - min));
    if (isReverse) {
      percent = 100 - percent;
    }
    return {
      id: markerId,
      'aria-label': aria,
      tabIndex: 0,
      style: {
        [`${isVertical ? 'top' : 'left'}`]: `${percent}%`
      },
      children: _jsx(Tooltip, {
        targetSelector: `#${markerId}`,
        children: text || number
      })
    };
  }, [isReverse, isVertical, markerId, max, min, numberFormat, text, value]);
  if (!value) {
    return null;
  }
  return _jsx("mark", {
    className: "dnb-slider__marker",
    ...params
  });
}
//# sourceMappingURL=SliderMarker.js.map