JSFiddle - React, Tailwind, and code Playground

by NV

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<div id="sync_container"></div>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/**
 * @jsx React.DOM
 */
var Sync = React.createClass({
	getInitialState: function() {
		return {x: 10};
	},
	render: function() {
		var x = this.state.x;
		return <p>
			<Slider onInput={this.onInput} value={x}/>
			&lt;-&gt;
			<Slider onInput={this.onInput} value={x}/>
		</p>;
	},
	onInput: function(e) {
		this.setState({x: parseInt(e.target.value)});
	}
});


var Slider = React.createClass({
	render: function() {
		return <input type="range" value={this.props.value} onInput={this.props.onInput}/>;
	}
});


React.renderComponent(
	<Sync/>,
	document.getElementById('sync_container')
);