Onchange Function for a range input - reactjs

Question

I'm using React.JS for building a range input slider.The value of min , max and value have been set by {this.renderMinTotal()} and {this.renderMaxTotal()}.The main problem is that when I try to toggle it it does not move at all.I know that I should use onChange handler but I do not know what to write.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
library: null,
};
}
componentDidMount() {
fetch("/json.bc", {
method: "get"
})
.then(response => response.text())
.then(text => {
let Maindata = JSON.parse(text.replace(/\'/g, '"'));
this.setState(
state => ({
...state,
data: Maindata
}),
() => {
this.reorganiseLibrary();
}
);
})
.catch(error => console.error(error));
}
reorganiseLibrary = () => {
const { data } = this.state;
let library = data;
library = _.chunk(library);
this.setState({
library,
});
};
handlePerPage = evt =>
this.setState(
{
perPage: evt.target.value
},
() => this.reorganiseLibrary()
);
renderMinTotal = () => {
const { library } = this.state;
if (!library || (library && library.length === 0)) {
return "";
}
return library.reduce((acc, lib) => {
const libMin = Math.min(...lib.map(item => item.totalCom));
return acc === undefined ? libMin : libMin < acc ? libMin : acc;
}, undefined);
};
renderMaxTotal = () => {
const { library } = this.state;
if (!library || (library && library.length === 0)) {
return "";
}
return library.reduce((acc, lib) => {
const libMax = Math.max(...lib.map(item => item.totalCom));
return libMax > acc ? libMax : acc;
}, 0);
};
handlerChange = evt =>{
let value = evt.target.value
///what should be written here///////
}
render() {
const { library } = this.state;
return (
<div>
<div>
<input
type="range"
min={this.renderMinTotal()}
max={this.renderMaxTotal()}
value={this.renderMaxTotal()}
step="1000"
className="multirange"
onChange={this.handlerChange}
/>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('Result'))

Answer 1

i don't see reason to load value of your range-input from
( this.renderMaxTotal() )
try just leaving value blank, later on try f.e.
onChange={(event)=>{console.log(event.target.value)}}