diff --git a/README.md b/README.md
index 2fb4ab6..56d47cc 100644
--- a/README.md
+++ b/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
diff --git a/example/js/example-app.jsx b/example/js/example-app.jsx
index 28621ae..1c4df60 100644
--- a/example/js/example-app.jsx
+++ b/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)} />
diff --git a/react-input-range.d.ts b/react-input-range.d.ts
index ef15437..cfc18e4 100644
--- a/react-input-range.d.ts
+++ b/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;
diff --git a/src/js/input-range/input-range.jsx b/src/js/input-range/input-range.jsx
index 9533423..95a3421 100644
--- a/src/js/input-range/input-range.jsx
+++ b/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}>
-
+ {
+ this.props.showMinLabel &&
+
+ }