cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
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:

image

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

Comments

  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,            
        null  
      ))));
    }
    
    // Example
    @mixin track() {
      background-size: $track-w - if(vendor-context() == ms, $ruler-line-w, 0) $track-h;
    }
    
  5. Thanks for all these epic examples! :)

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

You must be logged in to comment.
Loading...
Loading...