Range slider with ranging value black + green
Ranging boxes are found on many forms but no one bother about the style of the range boxes. Usually range boxes inside a form are seen styleless.But now a days websites are attracted by the user using different styles on the website using css. The <input type=range > is most commonly introduced on html 5 to add ranging values.
300
The range box has its own style but the built in style can be removed using the css property -webkit-appearance to none so the actual style disappears and we can add our own styles using our skills
LIVE PREVIEW:
300
See how the values are changing. Actually the green color is created by making a big ball on the left side of the range slider and made hidden by the property overflow to hidden.
Here is the code of the ranging value
CODE:
<html>
<head>
<title>code by psyco</title>
</head>
<body>
<div class=box>
<center>
<br><br><br>
<span id=value>300</span>
<br><br><br>
<input type=range value=300 min=0 max=1000 onChange=range(this.value) class=bar onmousemove=range(this.value) >
</center>
</div>
<style>
.box
{
background-color:black;
position:relative;
width:100%;
height:280px;
}
#value
{
display: block;
position:relative;
font-size:6em;
color:#999;
text-align: center;
font-weight:400;
}
.bar
{
width:75%;
height:15px;
-webkit-appearance:none;
background:#333;
border-radius:15px;
position:relative;
display:block;
outline:none;
overflow:hidden;
}
.bar::-webkit-slider-thumb
{
-webkit-appearance:none;
background:#00fd00;
width:15px;
height:15px;
border-radius:50%;
pointer:cursor;
box-shadow:-407px 0 0 400px #00fd00;
border:3px solid #333;
}
</style>
<script>
function range(value)
{
document.getElementById('value').innerHTML=value;
}
</script>
</body>
</html>
Comments
Post a Comment