Hey there, I have a hidden div containing a range input:
<div id="hiddencontainer" style="display:none;">
<input id="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/>
</div>
The range input works perfectly when displayed directly, but I need to hide it and only show it when the user clicks on a specific button.
The issue arises after clicking the "showing range" button, as the range is displayed but it becomes impossible to read its value.
Check out the demo and full code on jsbin: http://jsbin.com/voyilovuya/3/
HTML
<div id="hiddencontainer" style="display:none;"><!-- try without display none -->
<input id="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/>
</div>
<div id="container">
</div>
<div id="value">
</div>
<input type="button" value="Afficher" onClick="showhiddencontainer()"></input>
JS
function showrangevalue(){
document.getElementById("value").innerHTML=document.getElementById("range1").value;
}
function showhiddencontainer(){
document.getElementById("container").innerHTML=document.getElementById("hiddencontainer").innerHTML;
}
Do you have a solution to this issue? I appreciate any help you can provide. Thank you!