I have a range slider. When I move the slider I am getting the updated values. Say if slider range is 1 to 50, on slider move I will get 1 to 50 values and 50 api calls will be made. How to avoid this and make a single api call when the slider stops moving.
My requirement:
when I stop moving the slider, I want to make api call with last updated value. Below my code:
import React, { Component } from ‘react’
class SearchFilters extends Component {
constructor(props) {
super(props)
}
handleChange(e) {
let updatedValue = e.target.value;
Console.log(‘updatedValue’, updatedValue)
//make api call here
}
Render(){
Return(
<div className='range-input'>
<input type='range' id="r0"min='0’ max=‘50' onChange={(value) => this.handleChange(value)} />
</div>
)
}
}
For that purpose I would use react-rangeslider
It has callback onChangeComplete which you can use to achieve what you want.
I think that's the easiest way.
Here is how your code would look like :
import React, { Component } from "react";
import Slider from "react-rangeslider";
import "react-rangeslider/lib/index.css";
class SearchFilters extends Component {
constructor(props, context) {
super(props, context);
this.state = {
value: 0
};
}
handleChange = value => {
this.setState({
value: value
});
};
handleChangeComplete = () => {
//here you will make your api call
console.log("Change event completed");
};
render() {
const { value } = this.state;
return (
<div>
<Slider
min={0}
max={50}
value={value}
onChange={this.handleChange}
onChangeComplete={this.handleChangeComplete}
/>
<div className="value">{value}</div>
</div>
);
}
}
export default SearchFilters;