example.jsx

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

export default class Main extends React.Component {

  static defaultProps = {
    range: 128
  }

  constructor() {
    super();
    this.state = {
      red: this.props.range,
      green: this.props.range,
      blue: this.props.range
    };
    this.update = this.update.bind(this);
  }

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

  render() {
    return (
      <div>
        <Slider ref="red" {...this.props} update={this.update} />
        {this.state.red}
        <hr />
        <Slider ref="green" {...this.props} update={this.update} />
        {this.state.green}
        <hr />
        <Slider ref="blue" {...this.props} update={this.update} />
        {this.state.blue}
        <hr />
      </div>
    )
  }
}

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