InputSlider not updating on binding change


Topic: InputSlider not updating on binding change

schmidtfx asked 5 years ago

Hi,

I'm having issue with the MDBInputRange component.

Expected behavior Updating the slider value through updating the slider property value. In the snippet below, if I update the state member rangeValue, the slider does not get updated.

Actual behavior No update is happening.

Resources (screenshots, code snippets etc.)

state = {
  rangeValue: 0
}

<MDBRangeInput value={this.state.rangeValue} />

The main issue seems to be, that the property value is only considered on componentDidMount, updates to the properties are not recognised.

What is the intended behavior?

According to the documentation:

Slider's value - useful for additional data binding and edge use-cases

Does this suggest that the slider should update if the data binding changes?


Jakub Chmura staff premium answered 5 years ago

Hi @schmidtfx,

MDBInputRange is an input, every input in React need to onChange action when you want to use value. I made a snippet for you and it works well.

import React, { Component } from "react";
import { MDBRangeInput } from "mdbreact";

class SliderPage extends Component {
  state = {
    value: 0
  };

  handleValueChange = value => {
    this.setState({ value });
  };

  render() {
    return (

                    <MDBRangeInput
                      min={0}
                      max={96}
                      value={0}
                      formClassName="w-75"
                      getValue={this.handleValueChange}
                    />


    );
  }
}

export default SliderPage;

Best, Kuba


schmidtfx commented 5 years ago

Hi Kuba,

I understand that part. I want to do something different. I want to update the value of the slider itself.

I was expecting, I can just change the value field.

Does that makes sense?

Thanks


Jakub Chmura staff premium commented 5 years ago

@schmidtfx.

I discovered a bug. You can not change MDBRangeInput value itself (e.g. by onclick action in a button that changes the state of a value). You can only set an initial value using value prop. We fix this in the near future.

Best, Kuba


bgprior answered 5 years ago

I have a similar problem. It also seems to be related to this:

https://mdbootstrap.com/support/react/change-mdbrangeinput-value-through-mdbbtn-click/

The value tooltip is not showing when I move the slider. So I thought I would kill two birds with one stone and add an MDBInput field that (a) shows the value as the slider is moved, and conversely (b) allows you to input the value rather than use the slider. But as noted in this issue, I can update the MDBInput value when MDBInputRange.getValue updates the state variable used as the value for both inputs. But not vice versa. Using the MDBInput to update the same state variable does not update the value/position of MDBInputRange.

So main issue is the same as this. Shouldn't it be standard react behaviour that, if the value of an input is taken from a state variable, that input should update if the state variable changes?

The adjunct issue is: why is the tooltip not showing on MDBInputRange? The span is present (using Development Tools to view the generated HTML), but its height and width are never changed from zero, unlike the demos, where the height and width are set to 30 to make it visible when it is being moved or clicked.

I've uploaded a small screengrab (2.4MB) of the behaviour here: https://drive.google.com/file/d/1_Y7ben7hKdtELlOJhDV9qrgmP7w2jc6I/view?usp=sharing


Jakub Chmura staff premium answered 5 years ago

@schmidtfx, @bgprior,

Please update the MDBReact version to the latest version 4.23.1 we have fixed some errors with rangeinput, but we need to fix one more error with the update position and the value of the slider when manipulating this value outside the MDIputRange component.

Best, Kuba.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.23.0
  • Device: MacBook
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No