JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<div>React</div>
<div id="app"></div>
<div>Vanilla</div>
<input id="icecream" type="range"/><span id="value">50</span>
JavaScript
document.getElementById('icecream').onchange = function(e) {
document.getElementById('value').innerHTML = e.target.value;
}
var Slider = React.createClass({
getInitialState: function() {
return {value: 10};
},
handleChange: function(e) {
this.setState({value: e.target.value});
},
render: function() {
return React.createElement('div', undefined, [
React.createElement('input', {
type: 'range',
onChange: this.handleChange,
onInput: this.handleChange,
value: this.state.value
}),
this.state.value
]);
}
});
ReactDOM.render(React.createElement(Slider), document.getElementById('app'));