Tried to use a custom input type="range" element(due to bugs in mdb material slider see: https://mdbootstrap.com/support/react/material-slider-not-so-material-and-buggy/) but it is not possible at the moment. Having such an element on the same page with another mdb component totally messes up the input element. I tested couple of other form elements but they do not seem to be effected by this problem(normal input element works). I tried to remove the mdb.css but the result is the same, so it is not the styles that are causing the issue.

Issues:

• Slider thumb is skinned
• Slider thumb is stuck, cannot move
• Slider track is not visible

Since I cannot use mdb slider due to bugs or a custom one, this is a major blocker for me. I would really appreciate if you quickly resolve the problem or suggest a workaround.

Resources (screenshots, code snippets etc.)

import React from 'react'; import logo from './logo.svg'; import './App.css'; import '@fortawesome/fontawesome-free/css/all.min.css'; import 'bootstrap-css-only/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css'; import {MDBContainer} from "mdbreact";

function App() { return (

<div className="App">

            <input type="range" value="6500" step="25" min="1000" max="12600"/><br/>
            <input name="firstname" type="text" /><br/>
          <select name="cars">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="fiat">Fiat</option>
              <option value="audi">Audi</option>
          </select>
            <textarea name="message" rows="10" cols="30" />
          <MDBContainer>bla bla bla</MDBContainer>
</div>   ); }

export default App;