React Comboslider

by ramnathv

HTML

<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div id="app"></div>
    </div>
  </div>
</div>

<span class="pull-right">
  
</span>

CSS

#main{margin-top: 20px;}
.param-min,
.param-max{
   margin-top: 4px;
   background: steelblue; 
   color: white;
   padding-left: 5px;
   padding-right: 5px;
   border-radius: 5px;
   font-size: 11px;
  }

Babel + JSX

var ComboNumericSlider = React.createClass({
  getInitialState(){
    return {
      value: this.props.defaultValue,
      min: this.props.min,
      max: this.props.max,
      step: this.props.step
    }
  },
  handleInputChange(e){
    let val = e.target.value
    this.setState({
      value: val,
    })
    if (this.state.max < val || val < this.state.min){
      this.setState({
        min: val*0.5,
        max: val*1.5
      })
    }
  },
  handleSliderChange(e){
    console.log(e.target.value)
    this.setState({value: e.target.value})
  },
  render(){
    return(
      <div className="comboslider" style={{marginBottom: 20}}>
        <div className="comboslider__controls"
           style={{height: 40}}>
          <span className="pull-left">
            <b>{this.props.label}</b>
          </span>
          <span className="pull-right">
            <input type="number" 
              className="form-control input-sm" 
              style={{width: 60}}
              defaultValue={this.props.defaultValue}
              step={this.state.step}
              value={this.state.value}
              onChange={this.handleInputChange}
            />
          </span>
        </div>
        <div className='comboslider__slider' 
            style={{marginBottom: 30}}>
          <input type="range"
            min={this.state.min}
            max={this.state.max}
            step={this.state.step}
            value={this.state.value}
            onChange={this.handleSliderChange}
          />
          <span className='pull-left param-min'>
            {this.state.min}
          </span>
          <span className='pull-right param-max'>
            {this.state.max}
          </span>
        </div>
        {this.props.border ? <hr /> : null}
      </div>
    )
  }
})

const DATA = {}
DATA.normal = [
  {label: "Mean", defaultValue: 10, min: 0, max: 20, step: 1},
  {label: "Stdev", defaultValue: 0, min: 0, max: 1, step: 0.1}
]
DATA.exp = [
  {label: "Rate", defaultValue:...