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

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

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