Topic: Slider in md-form div
ashleyww93 asked 6 years ago
Hi.
Im trying to use a slider in a form, I have attempted the following, but it doesnt work as you can see in the screenshot attached.
<div class="md-form"> <i class="fal fa-file-certificate prefix"></i> <div class="range-field"> <input type="range" id="searchGPAabove" class="form-control" value="0.0" step="0.01" min="0.00" max="5.00"> </div> <label for="searchGPAabove">GPA Above</label> </div>
Suggestions, please? (Pro user)
https://imgur.com/a/YoWH8cW
Marta Szymanska staff pro premium answered 6 years ago
ashleyww93 answered 6 years ago
ashleyww93 answered 6 years ago
Marta Szymanska staff pro premium answered 6 years ago
<!-- Material form contact --> <div class="card"> <h5 class="card-header info-color white-text text-center py-4"> <strong>Contact us</strong> </h5> <!--Card content--> <div class="card-body px-lg-5 pt-0"> <!-- Form --> <form class="" style="color: #757575;"> <!-- Name --> <div class="md-form mt-3"> <input type="text" id="materialContactFormName" class="form-control"> <label for="materialContactFormName">Name</label> </div> <!-- E-mail --> <div class="md-form"> <input type="email" id="materialContactFormEmail" class="form-control"> <label for="materialContactFormEmail">E-mail</label> </div> <!-- Subject --> <span>Subject</span> <select class="mdb-select"> <option value="" disabled>Choose option</option> <option value="1" selected>Feedback</option> <option value="2">Report a bug</option> <option value="3">Feature request</option> <option value="4">Feature request</option> </select> <div class="md-form mt-5"> <i class="fa fa-file prefix"></i> <div class="range-field ml-5"> <input type="range" id="searchGPAabove" value="0.0" step="0.01" min="0.00" max="5.00"> </div> <label for="searchGPAabove" style="top: -2.5rem;">GPA Above</label> </div> <!--Message--> <div class="md-form"> <textarea type="text" id="materialContactFormMessage" class="form-control md-textarea" rows="3"></textarea> <label for="materialContactFormMessage">Message</label> </div> <!-- Copy --> <div class="form-check"> <input type="checkbox" class="form-check-input" id="materialContactFormCopy"> <label class="form-check-label" for="materialContactFormCopy">Send me a copy of this message</label> </div> <!-- Send button --> <button class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" type="submit">Send</button> </form> <!-- Form --> </div> </div> <!-- Material form contact -->Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No