Topic: Change MDBRangeInput value through MDBBtn click

omnia free asked 5 years ago


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 }); };


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


Piotr Glejzer staff answered 5 years ago


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 free 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 free 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.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: 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