Issue with rendering of Slider


Topic: Issue with rendering of Slider

alvintng pro asked 6 years ago

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>

Jakub Mandra staff premium answered 6 years ago

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! 


alvintng pro answered 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! 


Jakub Mandra staff premium 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 premium 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 premium commented 6 years ago

Glad I could help.

Wish you well :)


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
  • User: 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
Tags