html-5 range slider max and min value

Question

I am using html-5 slider

      <input type="range" .. />

I want to slider's min and max values on its left and right side respectively . How can i do this?

Answer 1

Try

<input type="range" min="20" max="80" />

DEMO

Also the following attributes can be applied to input type="range"

• max - specifies the maximum value allowed
• min - specifies the minimum value allowed
• step - specifies the legal number intervals
• value - specifies the default value

Answer 2

If you want to display min and max values on its left and right, just print there:

10 <input type="range" min="10" max="20" /> 20

You could use css too, though its not widely supported.

input[type="range"]:before {
    content: attr(min) " ";
}
input[type="range"]:after {
    content: " " attr(max);
}