<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function myslide() {
var rd = parseInt(document.getElementById("red").value);
var rdh = (rd < 16) ? "0" + rd.toString(16) : rd.toString(16);
var hex = "#" + rdh + "0000";
document.body.style.backgroundColor = hex;}
function showvalue(s)
{
var val =document.getElementById("firstslider").value;
document.getElementById("slidervalue").innerHTML = val;
}
</script>
<style>
h1{background-color:#000;
color:#ccc;
text-align:left;
}
</style>
</head>
<body>
<h1>Example of Input Slider</h1>
<input type="range" id="firstslider" value="10" min="0" max="100" step="2" onchange="showvalue(this.value)" />
<h1 id="h">Slider Value is: </h1><span id="slidervalue">10</span>
<br />
<h1>To Change the Background Color:</h1>
<input type="range" id="red" name="red" value="0" min="0" max="255" step="1" onchange="myslide()" />
</body>
</html>
No comments:
Post a Comment