From 22a56142923e5a6734bccb6cb8c6a2a78751fe32 Mon Sep 17 00:00:00 2001
From: iam4x <iam4x@me.com>
Date: Wed, 24 May 2017 16:09:59 +0200
Subject: [PATCH] fix(Slider): handle edge case where `min === max`

Disable the slider, make sure it displays a full range
selected even if it's 0 everywhere.

Add some default style when it's disabled.

see: https://github.com/algolia/instantsearch.js/issues/2159
---
 src/components/Slider/Slider.js    | 47 +++++++++++++++++-------------
 src/css/default/_range-slider.scss | 13 +++++++++
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js
index 889f601acb..4d48f8d3f7 100644
--- a/src/components/Slider/Slider.js
+++ b/src/components/Slider/Slider.js
@@ -44,7 +44,7 @@ class Slider extends Component {
 
     const pitPoints = [min, ...times(steps - 1, step => min + stepsLength * (step + 1)), max]
       // bug with `key={ 0 }` and preact, see https://github.com/developit/preact/issues/642
-      .map(pitPoint => pitPoint === 0 ? 0.00001 : pitPoint);
+      .map(pitPoint => pitPoint === 0 ? 0.000001 : pitPoint);
 
     return pitPoints;
   }
@@ -55,9 +55,12 @@ class Slider extends Component {
   }
 
   createHandleComponent = tooltips => props => {
+    // display only two decimals after comma,
+    // and apply `tooltips.format()` if any`
+    const roundedValue = Math.round(parseFloat(props['aria-valuenow']) * 100) / 100;
     const value = has(tooltips, 'format')
-      ? tooltips.format(props['aria-valuenow'])
-      : props['aria-valuenow'];
+      ? tooltips.format(roundedValue)
+      : roundedValue;
 
     const className = cx('ais-range-slider--handle', props.className, {
       'ais-range-slider--handle-lower': props['data-handle-key'] === 0,
@@ -65,10 +68,7 @@ class Slider extends Component {
     });
 
     return (
-      <div
-        {...props}
-        className={ className }
-      >
+      <div {...props} className={ className }>
         { tooltips
             ? <div className="ais-range-slider--tooltip">{value}</div>
             : null }
@@ -77,7 +77,12 @@ class Slider extends Component {
   }
 
   render() {
-    const {tooltips, step, pips, values, min, max} = this.props;
+    const {tooltips, step, pips, values} = this.props;
+
+    const isDisabled = this.props.min === this.props.max;
+    const {min, max} = isDisabled
+      ? {min: this.props.min, max: this.props.max + 0.001}
+      : this.props;
 
     const snapPoints = this.computeSnapPoints({min, max, step});
     const pitPoints = pips === true || pips === undefined || pips === false
@@ -85,18 +90,20 @@ class Slider extends Component {
       : pips;
 
     return (
-      <Rheostat
-        handle={ this.createHandleComponent(tooltips) }
-        onChange={ this.handleChange }
-        min={ min }
-        max={ max }
-        pitComponent={ Pit }
-        pitPoints={ pitPoints }
-        snap={ true }
-        snapPoints={ snapPoints }
-        values={ values }
-        disabled={ min === max }
-      />
+      <div className={ isDisabled ? 'ais-range-slider--disabled' : '' }>
+        <Rheostat
+          handle={ this.createHandleComponent(tooltips) }
+          onChange={ this.handleChange }
+          min={ min }
+          max={ max }
+          pitComponent={ Pit }
+          pitPoints={ pitPoints }
+          snap={ true }
+          snapPoints={ snapPoints }
+          values={ isDisabled ? [min, max] : values }
+          disabled={ isDisabled }
+        />
+      </div>
     );
   }
 
diff --git a/src/css/default/_range-slider.scss b/src/css/default/_range-slider.scss
index e7bc9fb7ab..0fc0fbe798 100644
--- a/src/css/default/_range-slider.scss
+++ b/src/css/default/_range-slider.scss
@@ -9,6 +9,19 @@ $range-slider-bar-color: $blue-light;
 $range-slider-handle-bg: $white;
 
 @include block(range-slider) {
+  .ais-range-slider--disabled {
+    cursor: not-allowed;
+
+    .ais-range-slider--handle {
+      border-color: $range-slider-marker-bg;
+      cursor: not-allowed;
+    }
+
+    .rheostat-horizontal .rheostat-progress {
+      background-color: $range-slider-marker-bg;
+    }
+  }
+
   .rheostat {
     overflow: visible;
     margin-top: 2em;