Cross Browser HTML5 Range Input (Progressively Enhanced with Javascript & SCSS)

cross-browser-html5-range-input-progressively-enhanced-with-javascript-scss.markdown

Cross Browser HTML5 Range Input (Progressively Enhanced with Javascript & SCSS)

A cross browser HTML5 media player for media elements (,

SCSS template for HTML5 media elements progressively enhanced with ES5 plain Javascript with udio / video poster / thumbnail generation.

A Pen by Dan on CodePen.

License.

index.html

<h1>HTML5 <code>&lt;input type="range"/&gt;</code></h1>
<p>
  A <b>HTML5 range input</b> normalized with Javascript and SCSS as a <abbr title="Progressive enhancement is a strategy for web design that emphasizes core webpage content first. This strategy then progressively adds more nuanced and technically rigorous layers of presentation and features on top of the content as the end-user's browser/internet connection allow.">progressive enhancement</abbr> with cross-browser support.
</p>
<section>
  <!-- Code example -->
  <input type="range" value="50" min="0" max="100" step="1">
  <!-- Code example / -->
</section>  
<h2>Browser & Support Goals:</h2> 
<ul class="goals">
  <li class="done" title="Done and working.">Elegant and slick <code>-webkit</code> range progress fill color normalization (<code>-ms</code> and <code>-moz</code> logic) in under 10 lines of Javascript code and a CSS <code>var()</code>.</li>
</ul>
<div class="supportme">
  <input type="checkbox" id="open-payment" hidden/>
  <label for="open-payment">
    <a href="https://bit.ly/2Jr5dz8" 
       rel="nofollow" 
       target="_blank">Redirecting to PayPal<i>...</i></a>
  </label>
  Was this code usefull or did you re-use it for one of your own projects?</br>
  <a href="https://bit.ly/2Jr5dz8" 
     rel="nofollow" 
     target="_blank" 
     title="Buy me a beer with PayPal and/or credit card..." 
     onclick="document.getElementById('open-payment').checked = true; window.open('https://bit.ly/2Jr5dz8','PayPal','width=380,height=640,resizable=1');">
    🍺 Buy me a beer!
  </a>
</div>

script.js

/*
  HTML5 range input
  ------------------
  For <input type="range"/> elements
  Support goals: IE9+, ES5 Javascript / vendor prefixes added 
  Normalize missing -webkit range progress with some CSS var() & Javascript
  
  Do you have a fix to optimize this code?
  Send an email to: dirkdigweed@gmx.net
  
*/
'use strict';
(function(){
  /* HTML input elements */
  var ranges = document.querySelectorAll('input[type="range"]');
  if(ranges) ranges.forEach(function(range){
    setFill(range, range.value);
    range.oninput = function(e){ setFill(range, range.value); }; 
  });
  function setFill(range, value){
    if(range == null || value == null) return;
    var min = parseFloat(range.min) || 0,
        max = parseFloat(range.max) || 1,
        r = 100/(max-min); /* Ratio range to 100% percent scale */
    range.style.setProperty('--rangeValue', (value-min)*r); /* Change CSS var in -webkit range track */
  }
})();

style.scss

@charset "utf-8";
// Default SCSS layout variables for example
// -----------------------------------------
// Google font import
@import url(https://fonts.googleapis.com/css?family=Raleway:200,400,500,800);
@import url(https://fonts.googleapis.com/css?family=Montserrat:800);
// Core colors
$primary-color: #5755d9 !default;
$primary-color-dark: darken($primary-color, 5%) !default;
$primary-color-light: lighten($primary-color, 4%) !default;
$secondary-color: lighten($primary-color, 37.5%) !default;
$secondary-color-dark: darken($secondary-color, 3%) !default;
$secondary-color-light: lighten($secondary-color, 3%) !default;
$highlight-color: #ffe9b3 !default;
// Dark / gray colors
$dark-color: #303742 !default;
$light-color: #fff !default;
$gray-color: lighten($dark-color, 55%) !default;
$gray-color-dark: darken($gray-color, 30%) !default;
$gray-color-light: lighten($gray-color, 20%) !default;
// Border radius
$border-radius: .2rem !default;
// Control colors
$success-color: #32b643 !default;
$warning-color: #ffb700 !default;
$error-color: #e85600 !default;
// Responsive breakpoints
$size-xxs: 380px !default;
$size-xs: 480px !default;
$size-sm: 600px !default;
$size-md: 840px !default;
$size-lg: 960px !default;
$size-xl: 1280px !default;
$size-2x: 1440px !default;
$responsive-breakpoint: $size-xs !default;
// Z-index
$zindex-0: 1 !default;
$zindex-1: 100 !default;
$zindex-2: 200 !default;
$zindex-3: 300 !default;
$zindex-4: 400 !default;
// Layout
$layout-spacing: 1rem !default;
  
// Main range input CSCC variables and mixins
// ------------------------------------------
$range-accent-color: $primary-color !default;
$range-track-color: rgba(255, 255, 255, .25) !default;
$range-bg-color: $dark-color !default;
$range-border-radius: .25em !default;
// Range input mixins
@mixin range-track {
  width: 100%;
  height: .5em;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: $range-track-color;
  border-radius :$range-border-radius;
  border: 0 solid rgba(1, 1, 1, 0);  
}
@mixin range-track-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);  
  height: .9em;
  width: .9em;
  border-radius: 1em;
  background: white;
  cursor: pointer;
  margin-top: -.2em;
  border:0;
}
@mixin range-disabled {
  cursor: not-allowed;
}

// Input Range SCSS code
// ------------------------------------------
// Note: No vendor prefixes added!
input[type=range] {
  /* Note: Vendor prefix pseudo elements can NOT be cascaded / coma-listed ! */
  font-size: 3rem; // Defines control sizes of range input in relation to rem messurement
  -webkit-appearance: none;
  background: transparent;
  width: 100%;height: 1em;
  margin: 0; padding:0;
  overflow:visible;
  top:50%;
  transform:translate(0%);
  --rangeValue: calc(attr(value)*100); /* Future use of W3C specs for value progress fill w/ CSS only */ 
  &:focus{
    outline: none;
  }
  &:active {
    outline: none;
    &::-webkit-slider-runnable-track {
      background-color: rgba(255, 255, 255, 0.75);
    }
    &::-moz-range-track {
      background-color: rgba(255, 255, 255, 0.75);
    }
    &::-ms-track {
      background-color: rgba(255, 255, 255, 0.75);
    }   
  }
  // Track
  &::-webkit-slider-runnable-track {
    @include range-track;
    /* Webkit progress fill via JS (future W3C specs could make JS obsolete) */ 
    background-image: -webkit-linear-gradient(left, $range-accent-color calc(var(--rangeValue)*1%), transparent calc(var(--rangeValue)*1%));
  } 
  &::-moz-range-track {
    @include range-track;
  }
  &::-ms-track{
    @include range-track;
    // IE / Edge layout correction
    margin-top:.075em;
  }
  &::-ms-fill-upper {
    @include range-track;
  }
  // Track progress
  &::-moz-range-progress {
    @include range-track;
    background: $range-accent-color;
    border-radius: $range-border-radius 0 0 $range-border-radius;
  }
  &::-ms-fill-lower {
    @include range-track;
    background: $range-accent-color;
    border-radius: $range-border-radius 0 0 $range-border-radius;
  }
  // Thumb
  &::-webkit-slider-thumb {
    @include range-track-thumb;
    // Thumb webkit browser overrides
    -webkit-appearance: none;
  }
  &::-moz-range-thumb{
    @include range-track-thumb; 
    // Thumb moz browser overrides
  } 
  &::-ms-thumb {
    @include range-track-thumb;
    // Thumb ms browser overrides
   margin-top: -.025em; 
  }
  // Disabled state
  &:disabled {
    // Track
    &::-webkit-slider-runnable-track {
      @include range-disabled;
    }    
    &::-ms-fill-upper {
      @include range-disabled;
    }
    // Track progress
    &::-ms-fill-lower {
      @include range-disabled;
    } 
    &::-moz-range-progress {
      @include range-disabled;
    }     
    // Thumb
    &::-webkit-slider-thumb {
      @include range-disabled;
    }
    &::-moz-range-thumb {
      @include range-disabled;
    }
    &::-ms-thumb {
      @include range-disabled;
    }
  }
}


// Presentation layout CSS
// ------------------------------------------
html {
  height:100%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  margin:0; padding:0;
}
body {
  background: $gray-color-dark;
  background: linear-gradient(to right, $gray-color-dark, darken($gray-color-dark,23%)); 
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  // height: 100%;
  margin:$layout-spacing;
  padding: 0;
  font-family:'Raleway', 'Helvetica', 'Arial', Arial, Helvetica, sans; 
  color:$gray-color-light;
}
a {
  color: $gray-color-light;
  text-decoration: none;
  &:link{
    color: $gray-color-light;
  }
  &:hover {
    color: $gray-color;  
  }
  &:focus, &:active {
    color: $gray-color-dark;
  }
}
h1, h2 {
  font-weight:100; color:#FFF;
  text-shadow: 1px 1px 0 rgba(0,0,0,.8);
  display: block; width: 100%; 
  text-align:center;
}
h2 {
  padding-bottom:0;
  margin-bottom:0;
}
code {font-weight:600;}
p{
  margin:.5em $layout-spacing;
  padding:0;
  text-align:center;
  abbr{
    cursor: help;
    text-decoration-line: dashed;
    border-style: dotted;
    border-width:0 0 1px 0;
  }
}
section {
  text-align:center;
  margin: 4em $layout-spacing 3em $layout-spacing;
  display: inline-block; max-width:20em; width:100%;
}
ul.goals{
  margin:.5em 0;
  padding:0;
  list-style:none;
  li{
    display: list-item;
    padding:.33em 1em;
    overflow:visible;
    margin-left:1.5em;
    cursor:help;
    &::before{
      vertical-align: text-bottom; position:absolute;
      content:'\02A2F'; // Testing char symbols
      content: '\02A3B';
      overflow:hidden; width:1.5em; display:inline-block;
      line-height:1;
      color: $error-color;
      font-weight: 800;
      font-size:1.25em;
      line-height:1em;
      margin-left:-1.5em;
    }
    &.done{
      &::before{
      content:'\02605'; 
      color: $success-color;
      } 
    }
    &.consider{
      &::before{
      content:'\02606'; 
      color: $warning-color;
      } 
    } 
  }
}
.supportme {
  margin: $layout-spacing $layout-spacing 0 $layout-spacing;
  line-height:1.75;
  text-align: center;
  color: $gray-color;
  input {
    display:hidden;
    &:checked + label:first-of-type{
      visibility:visible;
      opacity:1;
      pointer-events:all;
    }
  }
  label{
    position:fixed;
    left:0; top:0; right:0; bottom:0;
    background:rgba(0,0,0,.85);
    background-image:none;
    &:first-of-type{
      visibility:hidden;
      opacity:0;
      -webkit-transition: all .25s linear;
      transition: all .25s linear;
      pointer-events:none;
      color: #FFF;
      & a {
        position:absolute; display:inline-block;
        top:50%; left:50%;
        transform:translate(-50%, -50%);
        text-align:center; font-style:normal;
        color:#FFF;
        &::before{
          content: ''; display:block;
          color:currentColor; margin-bottom:2em;
          width:100%; height:3em; position: relative;
          background: transparent no-repeat center center;
          background-size: contain;
          background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" width="780" height="500" viewbox="0 0 780 500" fill="%23FFF"%3E%3Cpath d="M622 239c-4-4-9-6-15-6-8 0-15 3-20 9-5 5-8 12-8 20 0 6 2 11 6 15 4 3 9 5 15 5 8 0 15-3 20-8 6-6 9-12 9-20 0-7-2-12-7-15zm-371 0c-4-4-9-6-15-6a29 29 0 0 0-29 29c0 6 2 11 6 15 4 3 9 5 15 5 8 0 15-3 21-8 5-5 8-12 8-20 0-7-2-12-6-15z"/%3E%3Cpath d="M725 0H55C25 0 0 25 0 55v391c0 30 25 55 55 55h670c30 0 55-25 55-55V55c0-30-25-55-55-55zM121 258l-5-1-12 1-4 2c-2 1-3 2-3 4l-6 36c0 4-3 6-7 6H59c-1 0-2 0-3-2l-1-3 21-134c1-4 3-6 7-6h52c14 0 25 3 33 9 9 6 13 15 13 28 0 19-5 33-16 44a60 60 0 0 1-44 16zm174-43l-13 85c-1 4-3 6-7 6h-23c-3 0-4-2-4-5l1-7c-4 4-9 8-15 10-7 3-13 4-19 4-13 0-23-3-31-11-7-8-11-18-11-31 0-16 6-30 17-41 11-12 24-18 40-18 15 0 25 4 31 13 0-7 2-11 5-11h25l4 2v4zm43 125h-25c-3 0-4-2-4-4s9-15 27-40l-8-23-14-40-6-19 1-3 3-2h25c3 0 6 2 7 6l14 49 35-51c2-3 3-4 6-4h25l3 2 1 3v2l-84 121c-1 2-3 3-6 3zm154-82l-4-1-12 1-5 2-2 4-6 38c-1 3-3 4-5 4h-27c-1 0-2 0-3-2-1-1-2-2-1-3l21-134c0-4 3-6 7-6h52c14 0 25 3 33 9s13 15 13 28c0 19-6 33-16 44a60 60 0 0 1-45 16zm175-43l-13 85c-1 4-3 6-7 6h-23c-3 0-4-2-4-5v-4l1-3c-4 4-9 8-15 10-7 3-13 4-20 4-12 0-22-3-30-11-7-8-11-18-11-31 0-16 5-30 16-41 11-12 25-18 40-18s26 4 31 13c1-7 3-11 6-11h25l3 2 1 4zm58-49l-21 134c-1 4-3 6-7 6h-22l-3-1-1-3v-1l21-136c1-3 2-4 5-4h24c3 0 4 2 4 5z"/%3E%3Cpath d="M510 195l-8-4-12-1h-6c-2 0-4 2-4 4l-6 35h11c10 0 17-2 22-5 4-4 7-10 7-19 0-4-2-8-4-10zm-373-1c-3-2-10-4-19-4h-6c-2 0-4 2-4 4l-6 35h11c9 0 15-2 20-4 4-2 7-7 8-15 2-8 0-13-4-16z"/%3E%3C/svg%3E');
        }
      }     
    }
  }
  a{
    font-weight:800;
    letter-spacing:2px;
    font-size:18px;
    text-shadow: 1px 2px rgba(0,0,0,.9);
  }
}