Slider drags very slow

[chander-prakash]

When I implemented this in a sample project it was working fine, but when I implement in my project It works like a slow-mo movie.

I used this in my search filter section, and there are lots of rendering every filter change corresponds to re-render.

this.state = {
	filterParams: {
		value:{
			min:100,
			max:7000,
		},
	},
};




<InputRange
	ref="react_input_range"
	maxValue={7000}
	minValue={100}
	step={100}
	value={this.state.filterParams.value}
	onChange={value => this.changePriceRangeHandler(value)} 
/>

[cerealcoder]

I have similar issues in my project. There is a significant lag time (> 1 second) between when I move one of the slider controls, and when the slider control visualization is updated.

[cerealcoder]

The problem seems to occur when the value of the step property is set to a small value (which results in a large number of discrete points along the slider's continuum). If you calculate the step value based on some maximum number of discrete points, the problem seems to be mitigated to a large degree:

const numInputRangeSteps = 100;
...
<InputRange
    maxValue={this.state.timeRangeLimits.max}
    minValue={this.state.timeRangeLimits.min}
    step={(this.state.timeRangeLimits.max - this.state.timeRangeLimits.min) / numInputRangeSteps}
    value={this.state.timeRangeValue}
    onChange={this.onTimeRangeChange}
    onChangeComplete={this.onTimeRangeChangeComplete}
    formatLabel={epochMilliseconds => {
        return (new Date(epochMilliseconds)).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
    }} />

[gavbarosee]

May be slightly unrelated but if that helps anyone consider that the transition property also contributes to making the slider thumb drag slowly.

Simply disable the built in transition property like so:

Before: .input-range__slider-container { transition: left 0.3s ease-out; }

After: .input-range__slider-container { transition: none; }

[stefanderaadt]

May be slightly unrelated but if that helps anyone consider that the transition property also contributes to making the slider thumb drag slowly.

Simply disable the built in transition property like so:

Before: .input-range__slider-container { transition: left 0.3s ease-out; }

After: .input-range__slider-container { transition: none; }

Also make sure to set:

.input-range__track {
    transition: none;
}

Otherwise the slider bar will still have a transition.

[kimgysen]

It's much better to put the transition effect off per default. There is no functional use to having the delay and it will only bother the user rather than enhance the experience imo.