Skip to content

Instantly share code, notes, and snippets.

@yang-wei

yang-wei/app.js

Created December 2, 2014 03:47
Show Gist options
  • Save yang-wei/77048d933653718d8f2a to your computer and use it in GitHub Desktop.
Save yang-wei/77048d933653718d8f2a to your computer and use it in GitHub Desktop.
Download ZIP
React JS color slider
Raw
app.js
(function(exports) {
'use strict';
var Slider = React.createClass({
getDefaultProps: function() {
return {
redVal: '',
greenVal: '',
blueVal: ''
}
},
updateVal: function() {
this.props.onUserInput(
this.refs.redVal.getDOMNode().value,
this.refs.greenVal.getDOMNode().value,
this.refs.blueVal.getDOMNode().value
)
},
render: function() {
return (
<div>
<div className="form-group row">
<label className="col-xs-4" htmlFor="redSlider">R - {this.props.redVal}</label>
<input className="col-xs-8" id="redSlider" ref="redVal" type="range" min="0" max="255" value={this.props.redVal} onChange={this.updateVal} />
</div>
<div className="form-group row">
<label className="col-xs-4" htmlFor="greenSlider">G - {this.props.greenVal}</label>
<input className="col-xs-8" id="greenSlider" ref="greenVal" type="range" min="0" max="255" value={this.props.greenVal} onChange={this.updateVal} />
</div>
<div className="form-group row">
<label className="col-xs-4" htmlFor="blueSlider">B - {this.props.blueVal}</label>
<input className="col-xs-8" id="blueSlider" ref="blueVal" type="range" min="0" max="255" value={this.props.blueVal} onChange={this.updateVal} />
</div>
</div>
)
}
});
var ColorBar = React.createClass({
getDefaultProps: function() {
return {
redVal: '',
greenVal: '',
blueVal: ''
}
},
render: function() {
var redVal = this.props.redVal,
greenVal = this.props.greenVal,
blueVal = this.props.blueVal;
var style = {
backgroundColor:'rgb(' + redVal + ',' + greenVal + ',' + blueVal + ')'
};
return (
<div className="color-bar" style={style}></div>
)
}
});
var APP = React.createClass({
getInitialState: function() {
return {
redValue: 255,
greenValue: 255,
blueValue: 255
}
},
handleUserInput: function(redValueFromDOM, greenValueFromDOM, blueValueFromDOM) {
this.setState({
redValue: redValueFromDOM,
greenValue: greenValueFromDOM,
blueValue: blueValueFromDOM
});
},
render: function() {
return (
<div>
<Slider
redVal={this.state.redValue}
greenVal={this.state.greenValue}
blueVal={this.state.blueValue}
onUserInput={this.handleUserInput}
/>
<ColorBar
redVal={this.state.redValue}
greenVal={this.state.greenValue}
blueVal={this.state.blueValue}
/>
</div>
)
}
});
exports.APP = React.render(<APP />, document.getElementById('container'));
})(typeof exports === 'undefined' ? this['sliderModule']={} : exports);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>Drap and Drop ReactJS</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<h2>Color Slider</h2>
<div id="container" class="container">
</div>
<script src="http://fb.me/react-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script type="text/jsx" src="app.js"></script>
</body>
</html>
Raw
style.css
#container {
padding-top: 20px;
}
input[type=range] {
width: auto;
}
.color-bar {
width: 100%;
height: 40px;
display: block;
border: 1px solid #b6b6b6;
border-radius: 6px;
}
.col-xs-8 {
padding: 0
}
[for=redSlider] {
color: red;
}
[for=greenSlider] {
color: green;
}
[for=blueSlider] {
color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment