Change MDBRangeInput value through MDBBtn click

Topic: Change MDBRangeInput value through MDBBtn click

omnia free asked 4 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 4 years ago

Hi,

I see a problem here. We will try to fix as soon as possible. Thanks for the report.

Best,
Piotr

Add comment

Piotr Glejzer staff answered 4 years ago

1 0 Best answer

Can you check this code? You have to add this function as I did and change a little code in <code>InputRange.js</code>.

<code>example.js</code>

<pre class="prettyprint"><code>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;
</code></pre>

<code>InputRange.js</code>

You have to comment <code>value</code> in <code>InputRage.defaultprops</code>.

and change <code>value</code> in input tag like that:

<code>value={this.state.value || this.props.values}</code>

We will try to add/fix this feature to our component. Have a nice day.

Please insert min. 20 characters.

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 4 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 4 years ago

Do you have access to our gitlab account?

omnia free commented 4 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 4 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.

Add comment

Closed

This topic is closed.

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

omnia

12Support score
2Questions 0Answers 0Snippets