css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 36, 39 (nightly), Chrome 41, 43 (canary)/ Opera 28, 29, IE 11 on Windows 8.

A nightmare to keep the look consistent across browsers while using no JS. For Firefox and IE I have the ::-moz-range-progress and ::-ms-fill-lower respectively. For Chrome/ Opera I've used pseudo elements on the thumb and track. This is something that didn't work until recently, so I'm also using /deep/ - careful, experimental stuff, only supported in Blink, the spec has already changed, no future really, already not working anymore in canary - see (link #1, link #2).

Disclaimer because some people got the wrong idea: I did NOT design these sliders. Whoever knows me is probably aware of the fact that I'm 100% technical and 0% artistic. Me trying to design something would result in visual vomit. I just googled "slider design" and tried to reproduce (as well as I could) the images that search found. Inspiration for this demo:


You can see the rest of my 1 range input sliders in this collection.


  1. Slider—both stripes as main gauge—doesn't fill in Safari 8.

  2. @Michiel I know. Not because I tested (I didn't), but because I know Safari doesn't support any of the methods I've used for other browsers.

  3. @thebabydino no biggy, just thought you should know :)

  4. Great job Ana :-)

    Maybe consider using a function rather than a flag to handle vendor-specifics:

    @function vendor-context() {
      $selector: #{&};
      @return if(
        str-index($selector,-webkit-), webkit,  
        if(str-index($selector,-moz-), moz,
        if(str-index($selector,-ms-),  ms,      
        if(str-index($selector,-o-),   o,            
    // Example
    @mixin track() {
      background-size: $track-w - if(vendor-context() == ms, $ruler-line-w, 0) $track-h;
  5. Thanks for all these epic examples! :)

  6. If its broken? maybe delete pen??

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.