1

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 ?

Community
  • 1
  • 1
Pilou
  • 1,398
  • 13
  • 24
  • 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 May 15 '14 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 May 15 '14 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 May 15 '14 at 13:27
  • @Pierre-LouisLaffont use browserstack – Mr. Alien May 15 '14 at 13:29
  • I was looking for a workaround to this problem with an other tag or anything. – Pilou May 15 '14 at 13:30

1 Answers1

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.

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • 1
    Works just fine in both Chrome and IE10+ – Abhitalks May 15 '14 at 13:11
  • 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. – Pilou May 15 '14 at 13:11
  • @Pierre-LouisLaffont I didn't got the boundary part, can you explain it well? – Mr. Alien May 15 '14 at 13:15
  • 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. – Pilou May 15 '14 at 13:19
  • @Pierre-LouisLaffont can you check the second demo please – Mr. Alien May 15 '14 at 13:20
  • Both versions are fine to me, I can work on the style to match the rest of my page. ;) – Pilou May 15 '14 at 13:22