[Solved] HTML and CSS twitter/Facebook feed

Question

Since the slider is used for users input it used the same syntax other input tags do. The type of this tag though is “range”

<input type="range" />

The previous snippt should be enough to show the slider, but this tag has more attributes you can use. Let’s set the range of values (max and min).

<input type="range"  min="0" max="100" />

Now users can choose any number between 0 and 100.

The slider has a default value of zero but if you give it a different value, when the browser renders the code, the pin will be positioned at that value. The next code will position the pin halfway between the ends of the bar.

<input type="range" min="0" max="50" value="25" />

What if you just want people to choose values at intervals of 5? This can easily be accomplished using the step attribute.

<input type="range" min="0" max="50" value="25" step="5" />

How will users know what value they are choosing? That’s a good question and the answer is that you are going to have to come up with your own solution.
Here is a simple javascript code that will show the value of the slider as you slide it.

<html>
<body>
<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
    document.getElementById("range").innerHTML=newValue;
}
</script>
</body>
</html>

And that should render this (if your browser supports it)

Accepted Answer