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: #2159
algolia · May 24, 2017 · 22a5614 · 22a5614
1 parent 64d7ad2
commit 22a5614
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 20 deletions.
diff --git 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,20 +55,20 @@ 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,
       'ais-range-slider--handle-upper': props['data-handle-key'] === 1,
     });
 
     return (
-      <div
-        {...props}
-        className={ className }
-      >
+      <div {...props} className={ className }>
         { tooltips
             ? <div className="ais-range-slider--tooltip">{value}</div>
             : null }
@@ -77,26 +77,33 @@ 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
       ? this.computeDefaultPitPoints({min, max})
       : 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
@@ -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;