Dynamically Changing Min Max Values of Slider

Question

Trying to change the min and Max value of the Slider defined in Html Code

     <input type="range"  id="slider" min="0" max="100" value="50" />

at runtime like the following :

$( "#slider" ).slider( "option", "min", 40 );
$( "#slider" ).slider( "option", "max", 90 );

But its not working, Kindly help . No error . Also tried destroy() and refresh() , but no change.

Answer 1

Use .prop() to change min and max and then .slider("refresh") to apply changes.

$("#slider").prop({
  min: 40,
  max: 90
}).slider("refresh");

Demo