Topic: Extract values from multi-range slider
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.
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 commented 4 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 4 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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