More than one range slide


Topic: More than one range slide

pre Developer asked 5 years ago

Hello,how can i use more than one range slider on one page ? (May be reproduced, work independently from each other )


Mateusz Łubianka staff commented 5 years ago

Hi @pre Developer,

do you mean a solution where you don't have to add a custom id for each element?

Best,


pre Developer commented 5 years ago

ah yes maybe mdb free have this property? but without mdb pro..
if not, how can i change script? thanks


Mateusz Łubianka staff answered 5 years ago

Hi,

This is the simplest way:

$(document).ready(function() {

  const $valueSpan1 = $('.valueSpan1');
  const $valueSpan2 = $('.valueSpan2');
  const $valueSpan3 = $('.valueSpan3');
  const $value1 = $('#customRange11');
  const $value2 = $('#customRange12');
  const $value3 = $('#customRange13');
  $valueSpan1.html($value1.val());
  $valueSpan2.html($value2.val());
  $valueSpan3.html($value3.val());
  $value1.on('input change', () => { $valueSpan1.html($value1.val())});
  $value2.on('input change', () => { $valueSpan2.html($value2.val())});
  $value3.on('input change', () => { $valueSpan3.html($value3.val())});
});

Best,


pre Developer commented 5 years ago

I understand thank you so much. No matter how much, this is the simplest way we can proceed.


Mateusz Łubianka staff commented 5 years ago

I'm glad I could help,

Best,


pre Developer commented 5 years ago

by the way for this code; $value1.on('input change', () => { $valueSpan1.html($value1.val())}); there is a syntax error for internet explorer so i changed like this: $value1.on('input change', function (e) { $valueSpan1.html($value1.val()); }); it won't be a problem, right?


Mateusz Łubianka staff commented 5 years ago

Hi @pre Developer,

there should be no problem.

Best,


pre Developer commented 5 years ago

thank you :) best,


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.12.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No