CSS before and after pseudo element on input range

StackOverflow https://stackoverflow.com/questions/23679060

  •  23-07-2023
  •  | 
  •  

Вопрос

I want to do a slider with boundaries showed dinamicaly.

I found some code on internet which I adapted on my case. This code is using only html and css and it is well displayed on Chrome but not on Firefox (I only have IE9 which doesn't show 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>

I know this doesn't seem to be on the w3c spec (SO response).

But is it possible to do it properly for any browsers ?

Это было полезно?

Решение

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

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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top