​

const basicExample = document.querySelector('.multi-ranges-start-values');

const oneRangeValueBasic = document.querySelector('#multi-ranges-start-values-show');

​

 const basicExampleInit = new mdb.MultiRangeSlider(basicExample, { tooltips: true, startValues: [0, 100] });

​

 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>`;

 });

​

​

const basicExample2 = document.querySelector('.multi-ranges-start-values-2');

const oneRangeValueBasic2 = document.querySelector('#multi-ranges-start-values-show-2');

​

 const basicExampleInit2 = new mdb.MultiRangeSlider(basicExample2, { tooltips: true, startValues: [0, 100] });

​

 basicExample2.addEventListener('value.mdb.multiRangeSlider', (e) => {

   const [first, second] = e.values.rounded;

   oneRangeValueBasic2.innerHTML = `

     Value: <div class="d-flex flex-column">

       <div>First: ${first}</div>

       <div>Second  ${second}</div>

     </div>`;

 });