LinkedNumberField.js

/** @jsx React.DOM */

var LinkedNumberField = React.createClass({
  rootNode: null,
	getInitialState: function () {
		return {
			min: this.props.min ? this.props.min : 0,
			max: this.props.max ? this.props.max : 1,
			step: this.props.step ? this.props.step : 0.01,
			value: this.props.value ? this.props.value : 0.5
		};
	},
	componentDidMount: function (rootNode) {
		this.rootNode = rootNode;
	},
	render: function () {
		return (
			<div>
				<input type="number"
					onChange={this.handleChange}
					min={this.state.min}
					max={this.state.max}
					step={this.state.step}
					value={this.state.value}/>
				<input type="range"
					onChange={this.handleChange}
					min={this.state.min}
					max={this.state.max}
					step={this.state.step}
					value={this.state.value}/>
			</div>
		);
	},
	handleChange: React.autoBind(function () {
		if (this.rootNode) {
			for (var i in this.rootNode.childNodes) {
				if (this.rootNode.childNodes[i].value != this.state.value) {
					this.setState({value: this.rootNode.childNodes[i].value});
					if (this.props.onChange) {
						this.props.onChange(this);
					}
					break;
				}
			}
		}
	})
});