Topic: Change MDBRangeInput value through MDBBtn click
I have a MDBRangeInput, I want to add two button (plus and minus) to increase and decrease the value.
The onClick function on the two button trigger correctly the setState and the new value is visible in the bottom row but the slider doesn't move.
How can I trigger the MDBRangeInput to "feel" the new value that I set through the button click?
<MDBRow className="my-4" center>
<MDBBtn flat onClick={this.onClick} id="minusTI">
<MDBIcon className="font-weight-boldmr-2 mt-1" icon="minus" />
</MDBBtn>
<MDBRangeInput min={0} max={7200} step={20} value={this.state.timer} formClassName="w-75" getValue={this.handleTISliderChange}/>
<MDBBtn flat onClick={this.onClick} id="plusTI">
<MDBIcon className="font-weight-boldml-2 mt-1" icon="plus" />
</MDBBtn>
onClick = event => {var name = (event.target.id==="" ? event.target.offsetParent.id : event.target.id);var action = name.substring(0,name.length-2);var actuators = name.substring(name.length-2,name.length);this.setState({ [actuators]: this.state[actuators]+20 }); }
handleTISliderChange = value => { this.setState({ timer: value }); };
Can you check this code? You have to add this function as I did and change a little code in InputRange.js.
example.js
import React from "react";
import { MDBRangeInput, MDBRow, MDBBtn } from "mdbreact";
class SliderPage extends React.Component {
state = {
value: 2
};
increaseValue = () => {
this.setState(
prev => ({
value: prev.value + 1
}),
() => {
console.log(this.state.value);
}
);
};
render() {
return (
<>
<MDBBtn color="green" onClick={() => this.increaseValue()}>
text
</MDBBtn>
<MDBRow style={{ flexDirection: "column" }} className="my-5">
<MDBRangeInput
min={0}
max={100}
formClassName="w-25"
values={this.state.value}
/>
</MDBRow>
</>
);
}
}
export default SliderPage;
InputRange.js
You have to comment value in InputRage.defaultprops.
and change value in input tag like that:
value={this.state.value || this.props.values}
We will try to add/fix this feature to our component. Have a nice day.
omnia commented 5 years ago
Thank you for your answer.I install mdbreact through NPM, and I don't have in my node-modules directory any file named InputRange.js.
The only similar match is the macro file mdbreact.js, where InputRange is defined inside MDB. In this file I have the "defaultprops" but there isn't the input tag definition.
Where I can find this file? I have to install it separately through npm ( i.e. with "npm install react-input-range" ) ?
Piotr Glejzer staff commented 5 years ago
Do you have access to our gitlab account?
omnia commented 5 years ago
Yes, since I have a pro account. I can find the file in the repo? Once I took the file where do I put it?
Piotr Glejzer staff commented 5 years ago
This file is located in src/components/pro/InputRange, where you have to change code InputRange. Also, you have to add a new file (the name is up to you, I named it example.js) and put this code in your app, compile and run.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.21.1
- Device: pc
- Browser: chrome
- OS: win10
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 5 years ago
Hi,
I see a problem here. We will try to fix as soon as possible. Thanks for the report.
Best,
Piotr