[Slider] Take and use step props

Sliders can take the prop step, which effects the granularity of the slider input. Commit includes the upgraded component and updated docs.
mui · Jun 16, 2015 · cf6cf8d · cf6cf8d
1 parent 8158e25
commit cf6cf8d
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/docs/src/app/components/pages/components/sliders.jsx b/docs/src/app/components/pages/components/sliders.jsx
@@ -15,7 +15,7 @@ class SlidersPage extends React.Component {
       '// Default\n' +
       '<Slider name="slider1" />\n\n' +
       '// With starting value\n' +
-      '<Slider name="slider2" defaultValue={0.5} />\n' +
+      '<Slider name="slider2" defaultValue={0.5} step={0.10} />\n' +
       '<Slider name="slider3" defaultValue={1} />\n\n' +
       '// Disabled with fixed value\n' +
       '<Slider name="slider1" disabled={true} />\n' +
@@ -40,6 +40,12 @@ class SlidersPage extends React.Component {
             desc: 'The minimum value the slider can slide to on a scale from ' +
                   '0 to 1 inclusive.'
           },
+          {
+            name: 'step',
+            type: 'number',
+            header: 'default: 0.01',
+            desc: 'The granularity the slider can step through values.'
+          },
           {
             name: 'style',
             type: 'object',
@@ -57,7 +63,7 @@ class SlidersPage extends React.Component {
             header: 'optional',
             desc: 'Callback function that is fired when the user changes the ' +
                   'slider\'s value.'
-          }         
+          }
         ]
       },
     ];
@@ -68,8 +74,8 @@ class SlidersPage extends React.Component {
         code={code}
         componentInfo={componentInfo}>
 
-        <Slider name="slider1"/>
-        <Slider onMouseDown={this.handleMouseDown} name="slider2" value={0.5} />
+        <Slider name="slider1" />
+        <Slider name="slider2" value={0.5} step={0.10} />
         <Slider name="slider3" value={1}/>
         <Slider name="slider1" disabled={true} />
         <Slider name="slider2" disabled={true} value={0.5} />

diff --git a/src/slider.jsx b/src/slider.jsx
@@ -33,6 +33,7 @@ var Slider = React.createClass({
       required: true,
       disabled: false,
       defaultValue: 0,
+      step: 0.01,
       min: 0,
       max: 1,
       dragging: false
@@ -244,6 +245,7 @@ var Slider = React.createClass({
               <Draggable axis="x" bound="point"
                 cancel={this.props.disabled ? '*' : null}
                 start={{x: (percent * 100) + '%'}}
+                constrain={this._constrain()}
                 onStart={this._onDragStart}
                 onStop={this._onDragStop}
                 onDrag={this._onDragUpdate}
@@ -285,14 +287,50 @@ var Slider = React.createClass({
   },
 
   setPercent: function (percent) {
-    var value = this._percentToValue(percent);
+    var value = this._alignValue(this._percentToValue(percent));
     this.setState({value: value, percent: percent});
   },
 
   clearValue: function() {
     this.setValue(0);
   },
 
+  _alignValue: function (val) {
+    var { step, min } = this.props;
+
+    var valModStep = (val - min) % step;
+    var alignValue = val - valModStep;
+
+    if (Math.abs(valModStep) * 2 >= step) {
+      alignValue += (valModStep > 0) ? step : (-step);
+    }
+
+    return parseFloat(alignValue.toFixed(5));
+  },
+
+  _constrain: function () {
+    var { min, max, step } = this.props;
+    return (pos) => {
+      var pixelMax = React.findDOMNode(this.refs.track).clientWidth;
+      var pixelStep = pixelMax / ((max - min) / step);
+
+      var cursor = min;
+      var i;
+      for (i = 0; i < (max - min) / step; i++) {
+        var distance = (pos.left - cursor);
+        var nextDistance = (cursor + pixelStep) - pos.left
+        if (Math.abs(distance) > Math.abs(nextDistance)) {
+          cursor += pixelStep;
+        } else {
+          break;
+        }
+      }
+      return {
+        left: cursor
+      };
+    };
+  },
+
   _onFocus: function (e) {
     this.setState({focused: true});
     if (this.props.onFocus) this.props.onFocus(e);
@@ -349,7 +387,7 @@ var Slider = React.createClass({
   _updateWithChangeEvent: function(e, percent) {
     if (this.state.percent === percent) return;
     this.setPercent(percent);
-    var value = this._percentToValue(percent);
+    var value = this._alignValue(this._percentToValue(percent));
     if (this.props.onChange) this.props.onChange(e, value);
   },