Topic: Slider in md-form div

ashleyww93 free asked 5 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 Wierzbicka staff answered 5 years ago


Hi, take a look on this form and its range:
<!-- 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

ashleyww93 free answered 5 years ago


I have done so, its funny since your system on the account page clearly shows me my order number & my downloads.   How can I fix my issue?

ashleyww93 free answered 5 years ago


I have done so, its funny since your system on the account page clearly shows me my order number & my downloads.   How can I fix my issue?

Marta Wierzbicka staff answered 5 years ago


Hi, Range is a premium component, and according to our system, you use MDB Free version. Please, provide us a number o your order or registered email to confirm your access to MDB Pro components and premium support. Send it to me on email: m.szymanska@mdbootstrap.com Best, Marta

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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags