Dynamically set HTML5 range slider min, max and step values?

Question

How to dynamically set the max, min and step value dynamically for HTML5 range control?

<input id="slider" type ="range" min="0" max="300" step="20" value="100" />

I have used the following try but no luck for me

$('#slider').attr('min', 10);
$('#slider').attr('max', 100);

Answer 1

I have found the answer by changing the code on server side by using the constant value for Min,Max and step.

Answer Found: var div = document.createElement('div');
div.innerHTML = 'input id="slider" alt="Slider" title="Slider" type ="range" min="'+Constant+'" max="'+Constant+'" step="'+Constant+'" value="'+Constant+'" />';

document.getElementById('div').appendChild(div);

Thanks

Answer 2

You need to use .prop() instead of .attr().

$('#slider').prop('min', 10);
$('#slider').prop('max', 100);

Demo