I am looking to create a slider that dynamically displays boundaries.
After searching online, I came across some code that I modified to suit my needs. This code uses only HTML and CSS and looks great in Chrome, but not so good in Firefox (I also tried it in IE9, but it didn't display any slider):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
input {
position: relative;
}
input::after {
position: absolute;
top: 1em;
right: 0em;
content: attr(max);
}
input::before {
position: absolute;
top: 1em;
content: attr(min);
}
</style>
</head>
<body>
<input type="range" id="test" min="1" max="5">
</body>
</html>
Although it may not adhere to the w3c spec (SO response), I'm wondering if there is a way to make it work consistently across all browsers?