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>