fix(Slider): display disabled slider when min === max (#2041)

fixes #2037

Author: Maxime Janton

src/components/Slider/Slider.js

@@ -23,11 +23,16 @@ class Slider extends React.Component {
   }
 
   render() {
-    if (this.props.range.min === this.props.range.max) {
-      // There's no need to try to render the Slider, it will not be usable
-      // and will throw
-      return null;
-    }
+    // display a `disabled` state of the `NoUiSlider` when range.min === range.max
+    const {range: {min, max}} = this.props;
+    const isDisabled = min === max;
+
+    // when range.min === range.max, we only want to add a little more to the max
+    // to display the same value in the UI, but the `NoUiSlider` wont
+    // throw an error since they are not the same value.
+    const range = isDisabled
+      ? {min, max: min + 0.0001}
+      : {min, max};
 
     // setup pips
     let pips;
@@ -48,12 +53,14 @@ class Slider extends React.Component {
       <Nouislider
         // NoUiSlider also accepts a cssClasses prop, but we don't want to
         // provide one.
-        {...omit(this.props, ['cssClasses'])}
+        {...omit(this.props, ['cssClasses', 'range'])}
         animate={false}
         behaviour={'snap'}
         connect
         cssPrefix={cssPrefix}
         onChange={this.handleChange}
+        range={range}
+        disabled={isDisabled}
         pips={pips}
       />
     );

src/components/Slider/__tests__/Slider-test.js

@@ -47,10 +47,27 @@ describe('Slider', () => {
     );
   });
 
-  it('should not render anything when ranges are equal', () => {
+  it('should render <NouisLider disabled="true" /> when ranges are equal', () => {
     props.range.min = props.range.max = 8;
     const out = render();
-    expect(out).toEqual(null);
+    expect(out).toEqualJSX(
+      <Nouislider
+        animate={ false }
+        behaviour="snap"
+        connect
+        cssPrefix="ais-range-slider--"
+        format={ {to: () => {}, from: () => {}} }
+        onChange={ () => {} }
+        pips={ {
+          density: 3,
+          mode: 'positions',
+          stepped: true,
+          values: [0, 50, 100],
+        } }
+        range={ {min: props.range.min, max: props.range.min + 0.0001} }
+        disabled
+      />
+    );
   });
 
   function render() {

src/css/default/_range-slider.scss

@@ -16,6 +16,15 @@ $range-slider-handle-bg: $white;
     height: $range-slider-target-height;
     margin-top: 2em;
     margin-bottom: 2em;
+
+    &[disabled="true"] {
+      cursor: not-allowed;
+
+      .ais-range-slider--handle {
+        border-color: $range-slider-marker-bg;
+        cursor: not-allowed;
+      }
+    }
   }
 
   @include element(base) {