You can use a span
to wrap that up with custom attributes with a data-
prefix which are valid as of HTML5
HTML
<span data-range-min="1" data-range-max="5">
<input type="range" id="test" min="1" max="5" />
</span>
CSS
span {
position: relative;
}
span:after {
position: absolute;
top: 1em;
right: 0em;
content: attr(data-range-max);
}
span:before {
position: absolute;
top: 1em;
content: attr(data-range-min);
}
Demo 2 (bit of a fancy version)
Tested on Firefox and Chrome and it works perfectly, now obviously you need to style them up by declaring some custom font family and color to make them bit fancy according to your requirements.