@equinor/eds-core-react/dist/esm/components/Slider/Output.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled from 'styled-components';
import { typographyTemplate } from '@equinor/eds-utils';
import { slider } from './Slider.tokens.js';
import { jsx } from 'react/jsx-runtime';

const {
  entities: {
    output
  }
} = slider;
const StyledOutput = styled.output.withConfig({
  displayName: "Output__StyledOutput",
  componentId: "sc-1dy945x-0"
})(["--realWidth:calc(100% - 12px);--background:var(--tooltip-background,", ");width:fit-content;position:absolute;display:flex;align-items:center;border-radius:4px;z-index:1;", ";color:white;background:var(--background);padding:4px 4px 2px 4px;bottom:calc(100% + 1px);pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;opacity:var(--showTooltip);[data-disabled] &{background:", ";color:", ";}"], output.background, typographyTemplate(output.typography), output.states.disabled.background, output.states.disabled.typography.color);
const Output = /*#__PURE__*/forwardRef(function Output({
  children,
  value,
  htmlFor
}, ref) {
  return /*#__PURE__*/jsx(StyledOutput, {
    ref: ref,
    style: {
      '--val': value
    },
    htmlFor: htmlFor,
    children: children
  });
});

export { Output };