Topic: Extract values from multi-range slider

Mads free asked 3 years ago


Hi.

I am using the Multi-range slider as part of a filter form to select minimum and maximum value.

I need to extract the two values at the press of a button. I need the left dot to be responsible of the min. and the right for the max.

The only way to I found to do something like this is through the counting function and hiding the output.

Is there a better way to do this? How can I change their value from a script? I cannot find any information in the docs.


Marcin Luczak staff answered 3 years ago


Hi,

The best way to do that is as you mentioned using counting which will cover many edge cases. However, for your case, I've also found another quick-fix solution and I've made small script that will allow you to get values from each range and assign it to an array, from which you can later get your values by a button click.

https://mdbootstrap.com/snippets/jquery/marcin-luczak/2568849#js-tab-view

Best regards, Marcin


Mads free commented 3 years ago

Thank you Marcin! Do you think it is possible to do the reverse as well? i.e. with the press of a button to take to values and set the position of the slider to those values. For example: We have a slider with min-max range of 0 to 100, and 2 values- 25 and 60. Then, by pressing a button one dot moves to 25 and the other to 60.


Marcin Luczak staff commented 3 years ago

Yes, you can achieve that with a custom function. I've made some changes in the snippet and now you have a button for setting values for the slider and a button for reading values. What's important after setting values you have to manually trigger the "change" event, otherwise, those values won't be updated by the event handler function. https://mdbootstrap.com/snippets/jquery/marcin-luczak/2568849#js-tab-view

You have to be careful with setting values manually because as you can see this is custom functionality and we can't guarantee its stability.

Regards, Marcin



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No