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 -

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?

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