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

The React implementation of the Equinor Design System

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

const {
  entities: {
    handle
  },
  states: {
    disabled: _disabled
  }
} = slider;
const track = css(["width:100%;height:100%;cursor:pointer;background:none;"]);
const thumb = css(["", " height:", ";width:", ";background:", ";cursor:pointer;position:relative;z-index:1;"], bordersTemplate(handle.border), handle.height, handle.width, handle.background);
const thumbHover = css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle.states.hover.background, handle.states.hover.border.type === 'border' && handle.states.hover.border.color);
const thumbHoverAndDisabled = css(["@media (hover:hover) and (pointer:fine){cursor:not-allowed;box-shadow:none;}"]);
const thumbDisabled = css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.type === 'border' && _disabled.border.color);
const StyledSliderInput = styled.input.attrs(() => ({
  type: 'range'
})).withConfig({
  displayName: "SliderInput__StyledSliderInput",
  componentId: "sc-17orw4f-0"
})(["&::-webkit-slider-runnable-track,&::-webkit-slider-thumb,&{-webkit-appearance:none;}::-moz-focus-outer{border:0;}width:100%;background:transparent;background:none;grid-column:1 / -1;grid-row:2;font:inherit;margin:0;z-index:2;outline:none;&[data-focus-visible-added]:focus{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:focus-visible{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:hover,&:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled:hover,&:disabled:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}&::-webkit-slider-runnable-track{cursor:not-allowed;}&::-moz-range-track{cursor:not-allowed;}}&:before,&:after{}&:after{right:0;}&::-webkit-slider-thumb{", " margin-top:6px;}&::-moz-range-thumb{", " height:8px;width:8px;}&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}"], outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), thumbHover, thumbHover, thumbDisabled, thumbDisabled, thumbHoverAndDisabled, thumbHoverAndDisabled, thumb, thumb, track, track);
const SliderInput = /*#__PURE__*/forwardRef(function SliderInput({
  value,
  min,
  max,
  id,
  step,
  onChange,
  onMouseUp,
  onKeyUp,
  disabled,
  ...restProps
}, ref) {
  return /*#__PURE__*/jsx(StyledSliderInput, {
    ...restProps,
    value: value,
    ref: ref,
    min: min,
    max: max,
    id: id,
    step: step,
    onChange: event => {
      onChange(event);
    },
    onMouseUp: event => {
      onMouseUp(event);
    },
    onKeyUp: event => {
      onKeyUp(event);
    },
    disabled: disabled
  });
});
SliderInput.displayName = 'SliderInput';

export { SliderInput };