Topic: Issue with rendering of Slider
1. how do I get the value for the slider by jquery? I notice that there's no value field in the input tag.
2. I think its rendering wrongly. I'd attach a picture but I can't seem to do so with your interface. The code is below.
<label class="ml-auto active" for="{{ render_field.id_for_label }}">{{label}}</label>
<div class="d-flex justify-content-center my-4">
<span class="font-weight-bold purple-text mr-2 mt-1">0</span>
<form class="range-field w-75">
<input
class="border-0"
type="range"
min="0"
max="100"
name="{{render_field.name}}"
value="50"
id="{{render_field.id_for_label}}"
/>
</form>
<span class="font-weight-bold purple-text ml-2 mt-1">100</span>
</div>
<div class="d-flex justify-content-center my-4">
<span class="font-weight-bold purple-text mr-2 mt-1">0</span>
<form class="range-field w-75">
<input
class="border-0"
type="range"
min="0"
max="100"
name="{{render_field.name}}"
value="50"
id="{{render_field.id_for_label}}" />
</form>
<span class="font-weight-bold purple-text ml-2 mt-1">100</span>
</div>
Question 1: Perfect! Thank you.
Question 2: I was actually referring to uploading a screenshot to this interface. In any case, i've linked the screenshot here: https://drive.google.com/file/d/18X_xkUHBmqNQY2dOvFcMvIevP03RIgD8/view?usp=sharing
The code for this rendering is above.
Thank you!
Jakub Mandra staff commented 6 years ago
Ah I see, I misunderstood you :)
You can attach pictures only by the web link, so first you must upload it somewhere.
alvintng pro commented 6 years ago
No worries, but the slider is still rendering wrongly. See here: https://drive.google.com/file/d/18X_xkUHBmqNQY2dOvFcMvIevP03RIgD8/view?usp=sharing
Jakub Mandra staff commented 6 years ago
Ok so as you can see here those sliders renders properly. I just pasted 1:1 your code.
On your screenshot one of sliders renders properly, so it proves that you installed all modules properly.
The only thing that comes to my mind is that your render_field values could crash something in the layout.
And label is not working with that style of sliders.
alvintng pro commented 6 years ago
Perfect! Thank you.
alvintng pro commented 6 years ago
Perfect! Thank you.
Jakub Mandra staff commented 6 years ago
Glad I could help.
Wish you well :)
Hi there
Answer 1:
$(document).ready(function () {
var slider = $("#slider");
slider.val(20);
slider.on("input change", function (e) {
console.log($(this).val())
})
});
Answer 2:
How to attach icons: https://mdbootstrap.com/docs/jquery/forms/slider/#icons
A little snippet here: https://mdbootstrap.com/snippets/jquery/mandra/142894
alvintng pro commented 6 years ago
Question 1: Perfect! Thank you.
Question 2: I was actually referring to uploading a screenshot to this interface. In any case, i've linked the screenshot here: https://drive.google.com/file/d/18X_xkUHBmqNQY2dOvFcMvIevP03RIgD8/view?usp=sharing
The code for this rendering is above.
Thank you!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: Laptop
- Browser: Chrome
- OS: Mac OS
- Provided sample code: Yes
- Provided link: No