Multi-Range Slider and other Pro Componets

Topic: Multi-Range Slider and other Pro Componets

BeldenSpartan premium asked 2 years 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.

Add comment

BeldenSpartan premium answered 2 years ago

0 0 Best answer

<p>Ok - figured out how to pass it over to views.py by setting up a hidden input field and then using:</p>

<pre class="prettyprint"><code>document.getElementById('lower').value = first;
</code></pre>

<p>where 'lower' is the id of the input field.</p>

<p>What I'm struggling with now is how can I have two multi-range sliders on the same page?</p>

<p>When I use try to use the following code, the second slider does not show up (due to the same id?)</p>

<br><br><br>
<h5>Selector 2</h5>

<p>How do you recommend we approach using multiple multi-range sliders on the same page?  Thank you -</p>

Please insert min. 20 characters.

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 2 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

Add comment

BeldenSpartan premium answered 2 years ago

0 0 Best answer

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 2 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.

Add comment

Dawid Wajszczuk staff answered 2 years ago

0 0 Best answer

<p>It seems like you forgot to copy JS code for this example to your JS file:</p>

<pre class="prettyprint"><code>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>`;
 });
</code></pre>

<p>It can be found here <a href="https://mdbootstrap.com/docs/standard/forms/multi-range-slider/#section-basic-example-values" target="_blank">https://mdbootstrap.com/docs/standard/forms/multi-range-slider/#section-basic-example-values</a> under the <code>JAVASCRIPT</code> tab. <br>
While copying examples from our site, remember to copy code from all available tabs (HTML, JAVASCRIPT, CSS).<br>
I hope this will solve your problem.</p>

<p>Keep coding, <br>
Dawid</p>

Please insert min. 20 characters.

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 2 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 2 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

Add comment

Write

Create snippet

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: 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

BeldenSpartan

Premium support 129Support score
10Questions 7Answers 2Snippets