@uiw/react-color-slider/esm/index.js

Color Slider component for React.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "className", "style", "onChange", "color", "lightness"];
import React from 'react';
import { color as handleColor, hexToHsva, hsvaToHsla, hsvaToHslString, validHex, hslStringToHsva } from '@uiw/color-convert';
import { jsx as _jsx } from "react/jsx-runtime";
var Slider = /*#__PURE__*/React.forwardRef((props, ref) => {
  var {
      prefixCls = 'w-color-slider',
      className,
      style,
      onChange,
      color,
      lightness = [80, 65, 50, 35, 20]
    } = props,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  var hsva = typeof color === 'string' && validHex(color) ? hexToHsva(color) : color || {};
  var handleClick = (hslStr, evn) => {
    onChange && onChange(handleColor(hslStringToHsva(hslStr)), evn);
  };
  return /*#__PURE__*/_jsx("div", _extends({
    ref: ref,
    style: _extends({
      display: 'flex'
    }, style),
    className: [prefixCls, className || ''].filter(Boolean).join(' ')
  }, other, {
    children: lightness.map((num, idx) => {
      var hsl = hsvaToHsla(hsva);
      var hslStr = "hsl(" + hsl.h + ", 50%, " + num + "%)";
      var checked = hslStr === hsvaToHslString(hsva);
      return /*#__PURE__*/_jsx("div", {
        style: {
          paddingLeft: 1,
          width: 100 / lightness.length + "%",
          boxSizing: 'border-box'
        },
        children: /*#__PURE__*/_jsx("div", {
          onClick: evn => handleClick(hslStr, evn),
          style: _extends({
            backgroundColor: hslStr,
            height: 12,
            cursor: 'pointer'
          }, checked ? {
            borderRadius: 2,
            transform: 'scale(1, 1.5)'
          } : {})
        })
      }, idx);
    })
  }));
});
Slider.displayName = 'Slider';
export default Slider;