Added forceVisible parameter to tipProps.

[12345-gh]

If need always to show toolTip value.

I want to show toolTip always. But I can't change this state. It works only on hover.
https://github.com/react-component/slider/blob/master/src/createSliderWithTooltip.jsx#L61
I added this changes because custom toolTip doesn't work.
#377

[coveralls]

Coverage remained the same at 72.941% when pulling 99038c8 on oziian:master into db32618 on react-component:master.

[coveralls]

Coverage remained the same at 72.941% when pulling d14fb7d on oziian:master into db32618 on react-component:master.

[tmikoss]

Would love this, or really any other way of forcing tooltips visible at all times.

[yesmeck]

I think we can just call it visible?

[12345-gh]

Renamed to visible.

[coveralls]

Coverage remained the same at 72.941% when pulling 21d9dce on oziian:master into db32618 on react-component:master.

[yesmeck]

Thanks!

[mradzwilla]

Can someone provide an example of how to implement this feature?

[12345-gh]

@mradzwilla You need just add visible={true}.
But I didn't find my code in the npm repository. The repository published a month ago, and my code merged at the same time.
I think we will need to wait until @yesmeck publish code into npm again.

import React from 'react';
import PropTypes from 'prop-types';
import Slider from 'rc-slider';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);

export class RangePrice extends React.Component {
	constructor (props) {
		super(props);
		this.state = {
			min: props.min,
			max: props.max
		};
		this.onChange = this.onChange.bind(this);
	}

	onChange (value) {
		this.props.onChange({min: value[0], max: value[1]})
	};

	componentWillReceiveProps(nextProps) {
		if (nextProps.max !== this.props.max) {
			this.setState({max: nextProps.max});
		}
		if (nextProps.min !== this.props.min) {
			this.setState({min: nextProps.min});
		}
	}

	render() {
		let defaultValue = [this.state.min, this.state.max];
		return(
			<div className="range-price">
				<Range min={this.state.min}
				       max={this.state.max}
				       defaultValue={defaultValue}
				       onChange={this.onChange}
				       visible={true}
				       tipFormatter={value => value} />
			</div>
		)
	}
}

RangePrice.propTypes = {
	min: PropTypes.number,
	max: PropTypes.number,
	onChange: PropTypes.func,
};

RangePrice.defaultProps = {
	min: 0,
	max: 100,
	onChange: () => {},
}; 

[lunatik-210]

I suppose it is in tipsProps like that:

tipProps={{visible: true}}

Otherwise, it's not showing up..

But there's a consequence of that, tooltips are not updating with a scroll, and will show randomly on the page until you will mouse focus on the slider itself. Are there any ways to overcome it? Or should i open a bug?

[yesmeck]

@lunatik-210 Please file a new issue and try to reproduce it on https://codesandebox.io

[computerjazz]

I'm seeing the buggy behavior in my app as well.

However, when I created an example it works as expected:
https://codesandbox.io/s/j2x418y2yw

[okrookrps]

I'm seeing the buggy behavior in my app as well.

However, when I created an example it works as expected:
https://codesandbox.io/s/j2x418y2yw

Here is the reproducible example
https://codesandbox.io/s/yv39p3qmx