@wordpress/components/build-module/color-picker/input-with-slider.js

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * Internal dependencies
 */
import { HStack } from '../h-stack';
import { Text } from '../text';
import { Spacer } from '../spacer';
import { space } from '../ui/utils/space';
import { RangeControl, NumberControlWrapper } from './styles';
import { COLORS } from '../utils/colors-values';
export const InputWithSlider = _ref => {
  let {
    min,
    max,
    label,
    abbreviation,
    onChange,
    value
  } = _ref;

  const onNumberControlChange = newValue => {
    if (!newValue) {
      onChange(0);
      return;
    }

    if (typeof newValue === 'string') {
      onChange(parseInt(newValue, 10));
      return;
    }

    onChange(newValue);
  };

  return createElement(HStack, {
    spacing: 4
  }, createElement(NumberControlWrapper, {
    min: min,
    max: max,
    label: label,
    hideLabelFromVision: true,
    value: value,
    onChange: onNumberControlChange,
    prefix: createElement(Spacer, {
      as: Text,
      paddingLeft: space(4),
      color: COLORS.ui.theme,
      lineHeight: 1
    }, abbreviation),
    spinControls: "none",
    size: "__unstable-large"
  }), createElement(RangeControl, {
    __nextHasNoMarginBottom: true,
    label: label,
    hideLabelFromVision: true,
    min: min,
    max: max,
    value: value // @ts-expect-error
    // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
    ,
    onChange: onChange,
    withInputField: false
  }));
};
//# sourceMappingURL=input-with-slider.js.map