/** @jsx React.DOM */

var DraggableNumber = React.createClass({

  getInitialState: function() {

    return {n: 21, x: 0, dragging: false};

  },

  handleMouseMove: function(event) {

    if (!this.state.dragging) return;

    var next = this.state.n + (event.pageX > this.state.x ? 1 : -1);

    this.setState({

      x: event.pageX,

      n: next > 0 ? next : this.state.n

    });

  },

  handleMouseDown: function(event) {

    event.preventDefault(); // prevent text selection

    this.setState({dragging: true});

  },

  handleMouseUp: function() {

    this.setState({dragging: false});

  },

  render: function() {

    return (

      <div onMouseMove={this.handleMouseMove}

           onMouseUp={this.handleMouseUp}

           className={this.state.dragging ? "dragging" : ""}>

        Last <span onMouseDown={this.handleMouseDown}>

               {this.state.n}

             </span> day{this.state.n > 1 ? "s" : ""}

      </div>

    );

  }

});

​

React.renderComponent(<DraggableNumber/>, document.body);