React-color: SliderPicker throwing style error with ReactJS

[ReesesSnickers]

Error:
The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
in div (created by Slider)
in Slider (created by ColorPicker)
in ColorPicker (at App.js:392)
in div (at App.js:385)
in div (at App.js:164)
in App (at src/index.js:7)

Code:

import React from 'react';
import './App.css'
import { SliderPicker } from 'react-color';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
sliderColor: {
        r: '255',
        g: '255',
        b: '255',
        a: '1',
      }
    };
  }

handleSliderChange = (color) => {
    this.setState({
     sliderColor: color.rgb
    })
 }

render() {
    return (
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between"
          }}
        >
          <SliderPicker
              color={ this.state.sliderColor }
              onChange={ this.handleSliderPickerChange }
          />
          <div 
            style={{
              backgroundColor: `rgba(${ this.state.sliderColor.r }, ${ this.state.sliderColor.g }, ${ this.state.sliderColor.b }, ${ this.state.sliderColor.a })`,
              borderRadius: "50%",
              width: "200px",
              height: "200px",
              marginRight: "50px"
            }}
          />
        </div>
      </div>
    );
  }
}

 export default App;

When I comment out the

<SliderPicker
     color={ this.state.sliderColor }
     onChange={ this.handleSliderPickerChange }
/>

the issue goes away.

[dakotalightning]

I'm getting the same error.

[ghost]

Same error here aswell.

[Crizzooo]

Any update on this? Slider component is completely unusable, in what Im assuming are newer versions of React...

[casesandberg]

You cant use the SliderPicker with the style prop or the SliderPicker doesn't work at all? I am using master with: this code and I cant seem to reproduce any issues:

<Slider 
    style={{ marginRight: 4 + 'em' }} 
    color={ 'red' }
    onChange={ console.log }
/>

Can you help me debug this by pasting some code examples?

[samus42]

I get the issue on latest of react-color, and i'm just using simple color and onChange (not providing style). I also tried putting in a style property, and still got the error.

<SliderPicker onChange={onChangeColor} color={selectedColor} />

This works fine on version 2.14.1 and under. Its only when I jump to 2.17.0 that it breaks

[g-s-k]

Also getting this error. Here is a minimal example. I'm using the SliderPicker with no props.

[cokencode]

@casesandberg New version needs to be published. The latest version v2.17.0 on npm was shipped before the fix #566

[PHCodes]

I'm also still having this issue.

[danielloczi]

Hi @casesandberg! As @cokencode suggested, could you please ship a new npm package?
Bug #585 makes impossible to use this library without the fix #566 !

[krisxcrash]

I am also having the same issue when trying to use SliderPicker.

[usama-jamil]

`

              <Label content="Secondary Color" />
              {/* <SliderPicker/> */}
          </Modal.Content>

`
i am also getting same error on version "react-color": "2.17.1"
but when i down grade to 2.14.1 the error is gone
the issue is with newer version

[casesandberg]

Apologies. Looks like the root package.json version didn't get updated. This means I have been publishing versions under 2.16.X for the past few months. This has been fixed and deployed a new version at [email protected]

[casesandberg]

I am going to go ahead and close this. If you are still having an issue please try using the newest version of this package. Otherwise, you can open a new issue.