HuePicker slider not sliding for react-color

Question

I am trying to create a huePicker using react-color. The current slider works and new colors are being selected. I know this because of my console.log. However, the slider knob/pointer is not moving along with my mouse pointer aka the slider doesn't slide. I don't know why this is. Could somebody help me?

import React, {useState} from "react";
import Slider from '@material-ui/core/Slider';
import {HuePicker} from 'react-color';
import reactCSS from 'reactcss'
import "./DailyForm.css"

const DailyForm = () => {
  const [colorValue, setColorValue] = useState({r: 10, g: 10, b: 10});

  function colorValueChange (event, newColor) {
    setColorValue(event.rgb);
    console.log(colorValue);
  }

  const styles = reactCSS({
    'default': {
      color: {
        width: '72px',
        height: '28px',
        borderRadius: '2px',
        background: `rgba(${colorValue.r }, ${ colorValue.g }, ${ colorValue.b }, ${ colorValue.a })`,
      }
    },
  });

  return (
    <div className="container">
      <div class = "questionSelection">
        <p class = "questions">
          Pick a color.
        </p>

        <p class = "questions">
          This is your current color:
        </p>

        <div class = "colorContainer">
          <div style = {styles.color} />
        </div>

        <HuePicker class = "colorSlider"
          onChange = {colorValueChange}
        />
      </div>
    </div>
  );
}

export default DailyForm;

Answer 1

I had the same problem, you can just install beta version.

npm i [email protected]

or

yarn add [email protected]

or try install other versions: https://www.npmjs.com/package/react-color