Jquery mobile dual range slider reload with new range

Question

Slider works well with initial range. Here is html for slider, initial range is 0 to 100

 <div data-role="rangeslider">       
    <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">       
    <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
</div>

<button id="btnReload" onclick="reloadRangeSlider(200, 300)"></button>

I want to implement a javascript function that can help to reload the slider with new range like 200 to 300. In my case, want to reload slider by clicking on btnRelaod button.

function reloadRangeSlider(min, max){
    //To do: reload functionality goes here 
}

Answer 1

Here is the answer of my question

function reloadRangeSlider(min, max){
       $('#range-1a').attr("min", min).attr("max", max).val(min);
       $('#range-1b').attr("min", min).attr("max", max).val(max);          
       $('#range-1a').slider("refresh");
       $('#range-1b').slider("refresh");         
    }

Answer 2

According to JQuery Mobile Docs If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:

$("#yourSlider").attr("min", min)
$("#yourSlider").attr("max", max)
$("#yourSlider").slider("refresh");

or you can use

$("#yourSlider").attr("min", min).attr("max", max).slider("refresh");