InputRange - unclear warnings when used - Material Design for Bootstrap

Topic: InputRange - unclear warnings when used

Satanko pro asked 5 years ago

Hi, when I use InputRange I get warnings on loading the component. Whether I pass a number into 'value' or a string I get a warning. When passing a number:

<InputRange min={0} max={100} value={this.sliderValue}
            getValue={this.onChangeSlider}/>

modules.js?hash=ff734b4192910c020630489b4c0624764a04b77f:21211 Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `t`, expected `string`. When passing a string:

<InputRange min={0} max={100} value={this.sliderValue+''}
            getValue={this.onChangeSlider}/>

Warning: Failed prop type: Invalid prop `value` of type `string` supplied to `t`, expected `number`. I suppose it is correct to use numbers. But the warning is distracting.

Satanko pro commented 5 years ago

Besides that, it would be great to have the option 'step' as it is available in a regular input object. E.g. I'd like to set only numbers like 10, 20, 30, 40, 50....

patatagrammar pro commented 5 years ago

I am having the same issue with the latest version, 4.7.1

Jakub Mandra staff commented 5 years ago

Are error logs the same?

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

By the way, good suggestion with 'step' option. Will add to our tasks.

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Well that is really confusing problem. Can't see any bad code or issues while using your code within fresh CRA application. I suggest you to update mdb to the newest version, which we released today, maybe there were some issues during your previous installation. Best, Jakub

Add comment

Satanko pro answered 5 years ago

0 0 Best answer

Well, can nesting be a problem? Never had that so far...

That is my code:
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><Modal size="lg" isOpen={this.modalShow} fade={false} toggle={this.toggleModal}
               className={this.props.className}>
  <ModalHeader toggle={this.toggle}>Add amount</ModalHeader>
  <ModalBody>
	<Container fluid className="text-black">
	   <Row>
	     <Col md="2" className="">Amount: </Col>
	     <Col md="10" className="mr-auto">{this.selectedRow.totalAmount}</Col>
	   </Row>
	   <Row>
             <Col md="6" className="ml-auto">
		<Input label="New Amount"
			value={this.sliderValue}/>
	     </Col>
	     <Col md="6" className="ml-auto">
		<InputRange min={0} max={100}
			    value={this.sliderValue+''}
			    getValue={this.onChangeSlider}/>
	     </Col>
	   </Row>
        </Container>
     </ModalBody>
  <ModalFooter>
     <Button color="primary" onClick={this.addAmount}>Aufbuchen</Button>{' '}
     <Button color="danger" onClick={this.toggleModal}>Abbrechen</Button>
  </ModalFooter>
</Modal></pre>
I can't see any problem. Maybe do you?

Kind regards,

Josef

Please insert min. 20 characters.

Well, can nesting be a problem? Never had that so far... That is my code:

<Modal size="lg" isOpen={this.modalShow} fade={false} toggle={this.toggleModal}
               className={this.props.className}>
  <ModalHeader toggle={this.toggle}>Add amount</ModalHeader>
  <ModalBody>
	<Container fluid className="text-black">
	   <Row>
	     <Col md="2" className="">Amount: </Col>
	     <Col md="10" className="mr-auto">{this.selectedRow.totalAmount}</Col>
	   </Row>
	   <Row>
             <Col md="6" className="ml-auto">
		<Input label="New Amount"
			value={this.sliderValue}/>
	     </Col>
	     <Col md="6" className="ml-auto">
		<InputRange min={0} max={100}
			    value={this.sliderValue+''}
			    getValue={this.onChangeSlider}/>
	     </Col>
	   </Row>
        </Container>
     </ModalBody>
  <ModalFooter>
     <Button color="primary" onClick={this.addAmount}>Aufbuchen</Button>{' '}
     <Button color="danger" onClick={this.toggleModal}>Abbrechen</Button>
  </ModalFooter>
</Modal>

I can't see any problem. Maybe do you? Kind regards, Josef

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Well, that is strange. This problem never occured. I also tested it on fresh CRA app and i goes well. Maybe you're nesting this component somewhere, which causes the conflicts? Regards, Jakub

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: 4.7.0
Device: Laptop
Browser: Chrome
OS: OSX
Provided sample code: No
Provided link: No

Satanko

Pro User 22Support score
3Questions 1Answers 0Snippets