diff --git a/examples/range.js b/examples/range.js
index dcc332b..2cd9a73 100644
--- a/examples/range.js
+++ b/examples/range.js
@@ -14,17 +14,41 @@ function log(value) {
 const CustomizedRange = React.createClass({
   getInitialState: function() {
     return {
+      lowerBound: 20,
+      upperBound: 40,
       value: [20, 40],
     };
   },
+  onLowerBoundChange: function(e) {
+    this.setState({ lowerBound: +e.target.value });
+  },
+  onUpperBoundChange: function(e) {
+    this.setState({ upperBound: +e.target.value });
+  },
   onSliderChange: function(value) {
     log(value);
     this.setState({
       value: value,
     });
   },
+  handleApply: function() {
+    const { lowerBound, upperBound } = this.state;
+    this.setState({ value: [lowerBound, upperBound]});
+  },
   render: function() {
-    return <Slider range value={this.state.value} onChange={this.onSliderChange} />;
+    return (
+      <div>
+        <label>LowerBound: </label>
+        <input type="number" value={this.state.lowerBound} onChange={this.onLowerBoundChange} />
+        <br />
+        <label>UpperBound: </label>
+        <input type="number" value={this.state.upperBound} onChange={this.onUpperBoundChange} />
+        <br />
+        <button onClick={this.handleApply}>Apply</button>
+        <br /><br />
+        <Slider range allowCross={false} value={this.state.value} onChange={this.onSliderChange} />
+      </div>
+    );
   },
 });