From 66a630cf578654559d4c07ff5b39401980a6b3d1 Mon Sep 17 00:00:00 2001
From: rubenmoya <rmoyarodriguez@gmail.com>
Date: Mon, 21 Nov 2016 20:07:44 +0100
Subject: [PATCH] fix (#942): slider increments with steps

---
 components/slider/Slider.js | 5 +++--
 spec/components/slider.js   | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/slider/Slider.js b/components/slider/Slider.js
index e2bfb089..df1abd89 100644
--- a/components/slider/Slider.js
+++ b/components/slider/Slider.js
@@ -197,8 +197,9 @@ const factory = (ProgressBar, Input) => {
 
     positionToValue (position) {
       const { sliderStart: start, sliderLength: length } = this.state;
-      const { max, min } = this.props;
-      return this.trimValue((position.x - start) / length * (max - min) + min);
+      const { max, min, step } = this.props;
+      const pos = (position.x - start) / length * (max - min);
+      return this.trimValue(Math.round(pos / step) * step + min);
     }
 
     start (position) {
diff --git a/spec/components/slider.js b/spec/components/slider.js
index 244b4967..f6977bd7 100644
--- a/spec/components/slider.js
+++ b/spec/components/slider.js
@@ -20,9 +20,9 @@ class SliderTest extends React.Component {
         <p>With steps, initial value and editable</p>
         <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
         <p>Pinned and with snaps</p>
-        <Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <Slider pinned snaps min={0} max={10} step={2} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
         <p>Disabled status</p>
-        <Slider disabled pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
+        <Slider disabled pinned snaps min={0} max={10} step={2} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
       </section>
     );
   }