Topic: Replace Multi-Range Slider with New startValues
BeldenSpartan asked 3 years ago
On my page, I load a mutli-range slider. I have a radio button that, on change, I want to reset the slider with new startValues. The page loads fine using the following code, however, when I select the paired radio button, which triggers an onchange call to my function, the multi-range slider is distorted and doesn't function. I think I might need to delete the instance of the slider before initializing a new slider, but not sure how to do that.
<input class="form-check-input" type="radio" name="radioPrimary" id="radiotoken0" onchange="setSlider()" checked />
<script type="text/javascript">
window.onload = setSlider();
function setSlider() {
if (document.getElementById("radiotoken0").checked == true) {
document.getElementById("rangelow0").value = 5;
document.getElementById("rangehigh0").value = 100;
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: [5, 100] });
basicExample.addEventListener('value.mdb.multiRangeSlider', (e) => {
const [first, second] = e.values.rounded;
document.getElementById("rangelow0").value = first;
document.getElementById("rangehigh0").value = second;
});
} else {
document.getElementById("rangelow1").value = 10;
document.getElementById("rangehigh1").value = 100;
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: [10, 100] });
basicExample.addEventListener('value.mdb.multiRangeSlider', (e) => {
const [first, second] = e.values.rounded;
document.getElementById("rangelow1").value = first;
document.getElementById("rangehigh1").value = second;
});
}
}
</script>
BeldenSpartan answered 3 years ago
Another follow up question - how can I set the values of the range slider in javascript?
Is there something like: basicExample.values = [20, 30] ??
I see that when the event listener is added, we get the values from e.values.rounded, but I don't see how to set the values.
Michał Duszak staff answered 3 years ago
You can work it all around by wrapping the slider and invoking a new component in it.
https://mdbootstrap.com/snippets/standard/m-duszak/3245413#js-tab-view
AJEsler2019 pro premium priority commented 3 years ago
Hi Michal I have been having trouble setting the values of the slider using your snippet. When I use all of my element IDs in your snippet, the slider works. When I try the same code in my site, I get the following error: TypeError: mdb.MultiRangeSlider is not a constructor on the following line of code: const newSlider = new mdb.MultiRangeSlider(newElement, { startValues: [2020, 2040]}); Any thoughts on what might be causing the error would be much appreciated. The slider itself works apart from when I try to reset the start values
Michał Duszak staff commented 3 years ago
Hello, I have copied the snippet's code into my local project and it works. You might not have your mdb files included properly. Try console.log(mdb) and see if MultiRangeSlider is defined there. Also could you please tell me how you are importing mdb?
BeldenSpartan answered 3 years ago
Thanks - and with respect to my second question, how do I control the values of the multi-range slider in javascript? For example, if I have an input field of type="number", and I want the user to be able to either drag the slider or enter a number, how do I get the slider values to change if the user enters a number in the input field?
Michał Duszak staff commented 3 years ago
We don't provide method to change slider's value at the moment, but I have added it to the list of ideas.
Bluedge pro premium priority answered 3 years ago
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 Standard
- MDB Version: MDB5 3.9.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No