Cacher is the code snippet organizer for pro developers

import React from 'react';
import ReactDOM from 'react-dom';

class ColorSelector extends React.Component {
    constructor() {
        super();
        this.state = {
            red: 0,
            green: 0,
            blue: 0
        }
        this.update = this.update.bind(this)
    }

    update(e) {
        this.setState({
            red: ReactDOM.findDOMNode(this.refs.red.refs.inp).value,
            green: ReactDOM.findDOMNode(this.refs.green.refs.inp).value,
            blue: ReactDOM.findDOMNode(this.refs.blue.refs.inp).value
        });
    }

    render() {
        return (
            <div className="color-picker-container">
                <h5 className="color-picker-label">{this.props.label}</h5>
                <ColorBoxPreview 
                  box_width={this.props.box_width} 
                  box_height={this.props.box_height} 
                  red={this.state.red}
                  green={this.state.green} 
                  blue={this.state.blue}
                />
                <ul className="color-picker-controls">
                    <li>
                        <Slider ref="red" update={this.update} default={this.state.red}/>
                        {this.state.red}
                    </li>
                    <li>
                        <Slider ref="green" update={this.update} default={this.state.green}/>
                        {this.state.green}
                    </li>
                    <li>
                        <Slider ref="blue" update={this.update} default={this.state.blue}/>
                        {this.state.blue}
                    </li>
                </ul>
            </div>
        )
    }
};

class Slider extends React.Component {
    render() {
        return (
            <div>
                <input ref="inp" type="range" min="0" max="255" value={this.props.default} onChange={this.props.update}/>
            </div>
        )
    }
}

class ColorBoxPreview extends React.Component {
    render() {
        let color = "rgb(" + this.props.red + "," + this.props.green + "," + this.props.blue + ")";
        return (
            <div>
                <div style={{
                    "height":this.props.box_height,
                    "width":this.props.box_width,
                    "background":color
                    }}>
                </div>
            </div>
        )
    }
}

ColorSelector.propTypes = {
    box_width: React.PropTypes.string.isRequired,
    box_height: React.PropTypes.string.isRequired,
};
ColorSelector.defaultProps = {
    label: "Select color"
};
ReactDOM.render(
    <ColorSelector box_width="130px" box_height="130px"/>,
    document.getElementById('container')
);