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 && + + } - + { + this.props.showMaxLabel && + + } {this.renderHiddenInputs()} diff --git a/src/js/input-range/slider.jsx b/src/js/input-range/slider.jsx index 3df937b..262689a 100644 --- a/src/js/input-range/slider.jsx +++ b/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}> - + { + this.props.showValueLabel && + + }