Props to show hide labels

README.md

@@ -136,6 +136,18 @@ The default increment/decrement of your component is 1. You can change that by s
 
 Set the current value for your component. If only a single number is provided, only a single slider will get rendered. If a range object (min/max) is provided, two sliders will get rendered
 
+#### showMinLabel: boolean
+
+If this property is set to true, the label for *min* value will be displayed.
+
+#### showMaxLabel: boolean
+
+If this property is set to true, the label for *max* value will be displayed.
+
+#### showValueLabel: boolean
+
+If this property is set to true, the label for the *current* value will be displayed.
+
 ### Types
 
 #### InputRangeClassNames

example/js/example-app.jsx

@@ -25,6 +25,7 @@ export default class ExampleApp extends React.Component {
           maxValue={20}
           minValue={0}
           value={this.state.value}
+          showMinLabel={false}
           onChange={value => this.setState({ value })}
           onChangeComplete={value => console.log(value)} />
 

react-input-range.d.ts

@@ -23,6 +23,9 @@ declare interface InputRangeProps {
   ariaControls?: string;
   classNames?: InputRangeClassNames;
   disabled?: boolean;
+  showMaxLabel?: boolean;
+  showMinLabel?: boolean;
+  showValueLabel?: boolean;
   formatLabel?: (value: number, type: string) => string;
   maxValue?: number;
   minValue?: number;

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

@@ -26,6 +26,9 @@ export default class InputRange extends React.Component {
       ariaControls: React.PropTypes.string,
       classNames: React.PropTypes.objectOf(React.PropTypes.string),
       disabled: React.PropTypes.bool,
+      showMinLabel: React.PropTypes.bool,
+      showMaxLabel: React.PropTypes.bool,
+      showValueLabel: React.PropTypes.bool,
       formatLabel: React.PropTypes.func,
       maxValue: rangePropType,
       minValue: rangePropType,
@@ -49,6 +52,9 @@ export default class InputRange extends React.Component {
       maxValue: 10,
       minValue: 0,
       step: 1,
+      showMaxLabel: true,
+      showMinLabel: true,
+      showValueLabel: true,
     };
   }
 
@@ -58,6 +64,9 @@ export default class InputRange extends React.Component {
    * @param {string} [props.ariaControls]
    * @param {InputRangeClassNames} [props.classNames]
    * @param {boolean} [props.disabled = false]
+   * @param {boolean} [props.showMaxLabel = true]
+   * @param {boolean} [props.showMinLabel = true]
+   * @param {boolean} [props.showValueLabel = true]
    * @param {Function} [props.formatLabel]
    * @param {number|Range} [props.maxValue = 10]
    * @param {number|Range} [props.minValue = 0]
@@ -537,7 +546,8 @@ export default class InputRange extends React.Component {
           onSliderKeyDown={this.handleSliderKeyDown}
           percentage={percentage}
           type={key}
-          value={value} />
+          value={value}
+          showValueLabel={this.props.showValueLabel} />
       );
 
       return slider;
@@ -586,12 +596,15 @@ export default class InputRange extends React.Component {
         onKeyUp={this.handleKeyUp}
         onMouseDown={this.handleMouseDown}
         onTouchStart={this.handleTouchStart}>
-        <Label
-          classNames={this.props.classNames}
-          formatLabel={this.props.formatLabel}
-          type="min">
-          {this.props.minValue}
-        </Label>
+        {
+          this.props.showMinLabel &&
+          <Label
+            classNames={this.props.classNames}
+            formatLabel={this.props.formatLabel}
+            type="min">
+            {this.props.minValue}
+          </Label>
+        }
 
         <Track
           classNames={this.props.classNames}
@@ -602,12 +615,15 @@ export default class InputRange extends React.Component {
           {this.renderSliders()}
         </Track>
 
-        <Label
-          classNames={this.props.classNames}
-          formatLabel={this.props.formatLabel}
-          type="max">
-          {this.props.maxValue}
-        </Label>
+        {
+          this.props.showMaxLabel &&
+          <Label
+            classNames={this.props.classNames}
+            formatLabel={this.props.formatLabel}
+            type="max">
+            {this.props.maxValue}
+          </Label>
+        }
 
         {this.renderHiddenInputs()}
       </div>

src/js/input-range/slider.jsx

@@ -10,17 +10,18 @@ export default class Slider extends React.Component {
    * Accepted propTypes of Slider
    * @override
    * @return {Object}
-   * @property {Function} ariaLabelledby
-   * @property {Function} ariaControls
-   * @property {Function} className
+   * @property {String} ariaLabelledby
+   * @property {String} ariaControls
+   * @property {Object} className
    * @property {Function} formatLabel
-   * @property {Function} maxValue
-   * @property {Function} minValue
+   * @property {Number} maxValue
+   * @property {Number} minValue
    * @property {Function} onSliderDrag
    * @property {Function} onSliderKeyDown
-   * @property {Function} percentage
-   * @property {Function} type
-   * @property {Function} value
+   * @property {Number} percentage
+   * @property {String} type
+   * @property {Number} value
+   * @property {Boolean} showValueLabel
    */
   static get propTypes() {
     return {
@@ -35,6 +36,7 @@ export default class Slider extends React.Component {
       percentage: React.PropTypes.number.isRequired,
       type: React.PropTypes.string.isRequired,
       value: React.PropTypes.number.isRequired,
+      showValueLabel: React.PropTypes.bool,
     };
   }
 
@@ -51,6 +53,7 @@ export default class Slider extends React.Component {
    * @param {number} props.percentage
    * @param {number} props.type
    * @param {number} props.value
+   * @param {Boolean} props.showValueLabel
    */
   constructor(props) {
     super(props);
@@ -242,12 +245,15 @@ export default class Slider extends React.Component {
         className={this.props.classNames.sliderContainer}
         ref={(node) => { this.node = node; }}
         style={style}>
-        <Label
-          classNames={this.props.classNames}
-          formatLabel={this.props.formatLabel}
-          type="value">
-          {this.props.value}
-        </Label>
+        {
+            this.props.showValueLabel &&
+            <Label
+              classNames={this.props.classNames}
+              formatLabel={this.props.formatLabel}
+              type="value">
+              {this.props.value}
+            </Label>
+        }
 
         <div
           aria-labelledby={this.props.ariaLabelledby}

src/js/input-range/track.jsx

@@ -8,10 +8,10 @@ export default class Track extends React.Component {
   /**
    * @override
    * @return {Object}
-   * @property {Function} children
-   * @property {Function} classNames
+   * @property {Node} children
+   * @property {Object} classNames
    * @property {Function} onTrackMouseDown
-   * @property {Function} percentages
+   * @property {Object} percentages
    */
   static get propTypes() {
     return {