Is there a way to adjust the opacity of an Element Id using a slider like in the second code snippet?
<p id="s1">See effect here</p>
<select onchange="myFunction(this);" size="14">
<option>0 <option>0.1 <option>0.2 <option>0.3 <option>0.4
<option>0.5 <option>0.6 <option>0.7 <option>0.8 <option>0.9
<option selected="selected">1
</select>;
<script type="text/javascript">
function myFunction(x) {
// Return text 'See effect here' of the selected option
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("s1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else { alert("Your browser doesn't support this example!"); } }
</script>
<style type="text/css">
.slidecontainer {width: 100%;}
.slider:hover {opacity: 1;}
</style>
<div class="slidecontainer">
<input type="range" min="0" max="10" value="5">
</div>