Topic: Multi-Range Slider and other Pro Componets
I can't seem to figure out how to get the multi-range slider other components to function properly.
This code works fine:
<div class="multi-range-slider"></div>
However, this code does not render a slider (it only displays Value, First, and Second text):
<div class="multi-ranges-basic"></div>
<div id="multi-ranges-basic-value" class="mt-3">
Value:
<span class="d-flex flex-column">
<div>First:</div>
<div>Second:</div>
</span>
</div>
I've copied the mdb-ui-kit folder within node modules to my static folder, and call them with:
{% load static %}
<link rel="stylesheet" href="{% static '/mdb-ui-kit/css/mdb.min.css' %}" />
<script type="text/javascript" src="{% static '/mdb-ui-kit/js/mdb.min.js' %}"></script>
But, I still can't seem to get the second, more useful multi-range slider to render properly.
Any help would be most appreciated - I've spent way too long trying to get this work.
Hi,
It seems like you forgot to copy JS code for this example to your JS file:
const basicExample = document.querySelector('.multi-ranges-basic');
const oneRangeValueBasic = document.querySelector('#multi-ranges-basic-value');
const basicExampleInit = new mdb.MultiRangeSlider(basicExample, {
max: 100,
min: 0,
});
basicExample.addEventListener('value.mdb.multiRangeSlider', (e) => {
const [first, second] = e.values.rounded;
oneRangeValueBasic.innerHTML = `
Value: <div class="d-flex flex-column">
<div>First: ${first}</div>
<div>Second ${second}</div>
</div>`;
});
It can be found here https://mdbootstrap.com/docs/standard/forms/multi-range-slider/#section-basic-example-values under the JAVASCRIPT tab.
While copying examples from our site, remember to copy code from all available tabs (HTML, JAVASCRIPT, CSS).
I hope this will solve your problem.
Keep coding,
Dawid
BeldenSpartan commented 3 years ago
Excellent - I'm new to this and didn't realize I needed a javascript file. It works! Two quick follow up questions: 1) Should I be putting the javascript file in my static folder? 2) Should I have a separate javascript file for every MDB component I use, or should I simply paste them all into one large javascript file?
Thanks again - very happy to see this functioning!
Dawid Wajszczuk staff commented 3 years ago
1) If you have already copied our files to this folder and it works for you then you can do it :) 2) It's totally up to you. I would suggest making only a few JS files. But both approaches are fine. Test what works best for you and what would be easier to maintain
Basic question, but I can't seem to find the answer. How do I get the values of the multi-range slider over to views.py? In other input forms, I just have a name="XXXX", and then within views.py, I have something along the lines of:
var1 = request.GET.get('XXXX')
Is there an example I can follow for getting the selected values within the range slider over to views.py?
Dawid Wajszczuk staff commented 3 years ago
Hi. We don't provide support for Python, so you need to figure it out on your own. But here is the example how to get values of the multi-range slider in JS https://mdbootstrap.com/snippets/standard/d-wajszczuk/3228280#js-tab-view . Maybe this will help you.
Ok - figured out how to pass it over to views.py by setting up a hidden input field and then using:
document.getElementById('lower').value = first;
where 'lower' is the id of the input field.
What I'm struggling with now is how can I have two multi-range sliders on the same page?
When I use try to use the following code, the second slider does not show up (due to the same id?)
<div class="multi-ranges-start-values" data-mdb-tooltip="true">
<div id="multi-ranges-start-values-show" class="mt-3"></div>
</div>
<input type="hidden" name="lower_lim" value="" id="lower">
<input type="hidden" name="upper_lim" value="" id="upper">
<br><br><br>
<h5>Selector 2</h5>
<div class="multi-ranges-start-values" data-mdb-tooltip="true">
<div id="multi-ranges-start-values-show" class="mt-3"></div>
</div>
<input type="hidden" name="lower_lim2" value="" id="lower2">
<input type="hidden" name="upper_lim2" value="" id="upper2">
How do you recommend we approach using multiple multi-range sliders on the same page? Thank you -
Dawid Wajszczuk staff commented 3 years ago
Hi. It is more related to your JS code. But I would suggest using unique IDs. Here is a basic example with 2 multi range sliders: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3234494#js-tab-view. I hope this will help you. Keep coding, Dawid
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 Standard
- MDB Version: MDB5 3.9.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No