Topic: Multi-Range Slider and other Pro Componets

BeldenSpartan premium asked 1 year ago


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.


BeldenSpartan premium answered 1 year ago


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 1 year 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


BeldenSpartan premium answered 1 year ago


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 1 year 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.


Dawid Wajszczuk staff answered 1 year ago


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 premium commented 1 year 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 1 year 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



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: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No