CSS before and after pseudo element on input range

Question

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 ?

I'm confused. Do you mean that the source where you got this code from says that it works well on Chrome and not in Firefox? Since you said you only have IE9 and can't test it anywhere else. — BoltClock
– BoltClock, Commented May 15, 2014 at 13:05
No I adapted the code, it works on my computer on Chrome but not on Firefox. But the only IE I have is the 9 so I can't test on IE10/11. — Pilou
– Pilou, Commented May 15, 2014 at 13:24
Oh. So haven't you answered your own question then? Since it's not defined in any standard, which in turn results in inconsistent browser support, there isn't a "proper" way to do it. — BoltClock
– BoltClock, Commented May 15, 2014 at 13:27
I was looking for a workaround to this problem with an other tag or anything. — Pilou
– Pilou, Commented May 15, 2014 at 13:30

Mr. Alien · Accepted Answer · 2014-05-15 13:18:03Z

8

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.

edited May 15, 2014 at 13:18

answered May 15, 2014 at 13:09

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abhitalks Over a year ago

Works just fine in both Chrome and IE10+

Pilou Over a year ago

I was thinking on adding a span in order to place the :after and :before but I was blocking on a way to dinamicaly get the boundaries. Your solution is fine but you have to duplicate the boudaries in the html.

Mr. Alien Over a year ago

@Pierre-LouisLaffont I didn't got the boundary part, can you explain it well?

Pilou Over a year ago

The part I called boundaries was the min and max values (excuse my english if it's not the apprpriated word). They have to be duplicated as new attributes of the span with your solution.

Mr. Alien Over a year ago

@Pierre-LouisLaffont can you check the second demo please

|

Collectives™ on Stack Overflow

CSS before and after pseudo element on input range

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related