feat: Allow min and max to have same value (#114)

You can have the same minimum and maximum value by setting `allowSameValues` property to true.

example/js/example-app.jsx

@@ -19,6 +19,10 @@ export default class ExampleApp extends React.Component {
         min: 3,
         max: 7,
       },
+      value6: {
+        min: 3,
+        max: 7,
+      },
     };
   }
 
@@ -65,6 +69,14 @@ export default class ExampleApp extends React.Component {
           onChangeComplete={value => console.log(value)}
           value={this.state.value5} />
 
+        <InputRange
+          allowSameValues
+          draggableTrack
+          maxValue={20}
+          minValue={0}
+          onChange={value => this.setState({ value6: value })}
+          onChangeComplete={value => console.log(value)}
+          value={this.state.value6} />
       </form>
     );
   }

src/js/input-range/input-range.jsx

@@ -23,6 +23,7 @@ export default class InputRange extends React.Component {
    */
   static get propTypes() {
     return {
+      allowSameValues: PropTypes.bool,
       ariaLabelledby: PropTypes.string,
       ariaControls: PropTypes.string,
       classNames: PropTypes.objectOf(PropTypes.string),
@@ -47,6 +48,7 @@ export default class InputRange extends React.Component {
    */
   static get defaultProps() {
     return {
+      allowSameValues: false,
       classNames: DEFAULT_CLASS_NAMES,
       disabled: false,
       maxValue: 10,
@@ -57,6 +59,7 @@ export default class InputRange extends React.Component {
 
   /**
    * @param {Object} props
+   * @param {boolean} [props.allowSameValues]
    * @param {string} [props.ariaLabelledby]
    * @param {string} [props.ariaControls]
    * @param {InputRangeClassNames} [props.classNames]
@@ -97,6 +100,12 @@ export default class InputRange extends React.Component {
      * @type {bool}
      */
     this.isSliderDragging = false;
+
+    /**
+     * @private
+     * @type {?string}
+     */
+    this.lastKeyMoved = null;
   }
 
   /**
@@ -199,7 +208,9 @@ export default class InputRange extends React.Component {
     if (this.isMultiValue()) {
       return values.min >= this.props.minValue &&
              values.max <= this.props.maxValue &&
-             values.min < values.max;
+             this.props.allowSameValues
+              ? values.min <= values.max
+              : values.min < values.max;
     }
 
     return values.max >= this.props.minValue && values.max <= this.props.maxValue;
@@ -227,6 +238,7 @@ export default class InputRange extends React.Component {
     const positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect());
 
     positions[key] = position;
+    this.lastKeyMoved = key;
 
     this.updatePositions(positions);
   }
@@ -574,8 +586,12 @@ export default class InputRange extends React.Component {
   renderSliders() {
     const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());
     const percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue);
+    const keys = this.props.allowSameValues &&
+      this.lastKeyMoved === 'min'
+      ? this.getKeys().reverse()
+      : this.getKeys();
 
-    return this.getKeys().map((key) => {
+    return keys.map((key) => {
       const value = values[key];
       const percentage = percentages[key];
 

test/input-range/input-range.spec.jsx

@@ -255,6 +255,49 @@ describe('InputRange', () => {
     component.detach();
   });
 
+  it('allows the min value to equal the max value', () => {
+    const jsx = (
+      <InputRange
+        allowSameValues
+        maxValue={20}
+        minValue={0}
+        value={{ min: 2, max: 10 }}
+        onChange={value => component.setProps({ value })}
+      />
+    );
+    const component = mount(jsx, { attachTo: container });
+    const minSlider = component.find(`Slider [onMouseDown]`).at(0);
+
+    minSlider.simulate('mouseDown', { clientX: 50, clientY: 50 });
+    document.dispatchEvent(new MouseEvent('mousemove', { clientX: 200, clientY: 50 }));
+    document.dispatchEvent(new MouseEvent('mouseup', { clientX: 200, clientY: 50 }));
+
+    expect(component.props().value).toEqual({ min: 10, max: 10 });
+
+    component.detach();
+  });
+
+  it('does not allow the min value to equal the max value', () => {
+    const jsx = (
+      <InputRange
+        maxValue={20}
+        minValue={0}
+        value={{ min: 2, max: 10 }}
+        onChange={value => component.setProps({ value })}
+      />
+    );
+    const component = mount(jsx, { attachTo: container });
+    const minSlider = component.find(`Slider [onMouseDown]`).at(0);
+
+    minSlider.simulate('mouseDown', { clientX: 50, clientY: 50 });
+    document.dispatchEvent(new MouseEvent('mousemove', { clientX: 200, clientY: 50 }));
+    document.dispatchEvent(new MouseEvent('mouseup', { clientX: 200, clientY: 50 }));
+
+    expect(component.props().value).toEqual({ min: 2, max: 10 });
+
+    component.detach();
+  });
+
   it('notifies the parent component when dragging starts', () => {
     const onChange = jasmine.createSpy('onChange').and.callFake(value => component.setProps({ value }));
     const onChangeStart = jasmine.createSpy('onChangeStart');