How to style HTML5 range input to have different color before and after slider

Question

I want the left side to be green and the right side to be gray  As pictured above would be PERFECT  Preferably a pure CSS solution  only need to worry about WebKit    Is such a thing possible

User · Answer

Yes  it is possible  Though I wouldn t recommend it because input range is not really supported properly by all browsers because is an new element added in HTML5 and HTML5 is only a draft  and will be for long  so going as far as to styling it is perhaps not the best choice   Also  you ll need a bit of JavaScript too  I took the liberty of using jQuery library for this  for simplicity purposes   Here you go  http   jsfiddle net JnrvG 1

User · Answer

Building on top of  dargue3 s answer  if you want the thumb to be larger than the track  you want to fully take advantage of the  lt input type  range    gt  element and go cross browser  you need a little extra lines of JS  amp  CSS    On Chrome Mozilla you can use the linear-gradient technique  but you need to adjust the ratio based on the min  max  value attributes as mentioned here by  Attila O   You need to make sure you are not applying this on Edge  otherwise the thumb is not displayed   Geoffrey Lallou   explains this in more detail here    Another thing worth mentioning  is that you need to adjust the rangeEl style height    20px   on IE Older  Simply put this is because in this case  the height is not applied to the track but rather the whole input including the thumb   fiddle   x000D   x000D      x000D     Sniffs for Older Edge or IE  x000D     more info here  x000D     https   stackoverflow com q 31721250 3528132 x000D      x000D  function isOlderEdgeOrIE     x000D    return   x000D      window navigator userAgent indexOf  MSIE     gt  -1    x000D        navigator userAgent match  Trident  rv  11        x000D      window navigator userAgent indexOf  Edge    gt  -1 x000D       x000D    x000D   x000D  function valueTotalRatio value  min  max    x000D    return   value - min     max - min   toFixed 2   x000D    x000D   x000D  function getLinearGradientCSS ratio  leftColor  rightColor    x000D    return   x000D       -webkit-gradient    x000D       linear     x000D       left top     x000D       right top     x000D       color-stop     ratio          leftColor          x000D       color-stop     ratio          rightColor        x000D          x000D      join      x000D    x000D   x000D  function updateRangeEl rangeEl    x000D    var ratio   valueTotalRatio rangeEl value  rangeEl min  rangeEl max   x000D   x000D    rangeEl style backgroundImage   getLinearGradientCSS ratio    919e4b     c5c5c5    x000D    x000D   x000D  function initRangeEl     x000D    var rangeEl   document querySelector  input type range     x000D    var textEl   document querySelector  input type text     x000D   x000D        x000D       IE Older Edge FIX x000D       On IE Older Edge the height of the  lt input type  range    gt  x000D       is the whole element as oposed to Chrome Moz x000D       where the height is applied to the track  x000D       x000D        x000D    if  isOlderEdgeOrIE      x000D      rangeEl style height    20px   x000D         IE 11 10 fires change instead of input x000D         https   stackoverflow com a 50887531 3528132 x000D      rangeEl addEventListener  change   function e    x000D        textEl value   e target value  x000D          x000D      rangeEl addEventListener  input   function e    x000D        textEl value   e target value  x000D          x000D      else   x000D      updateRangeEl rangeEl   x000D      rangeEl addEventListener  input   function e    x000D        updateRangeEl e target   x000D        textEl value   e target value  x000D          x000D      x000D    x000D   x000D  initRangeEl    x000D  input type  range     x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    width  300px  x000D    height  5px  x000D    padding  0  x000D    border-radius  2px  x000D    outline  none  x000D    cursor  pointer  x000D    x000D   x000D   x000D    Chrome thumb   x000D   x000D  input type  range    -webkit-slider-thumb   x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    -webkit-border-radius  5px  x000D      16x16px adjusted to be same as 14x14px on moz   x000D    height  16px  x000D    width  16px  x000D    border-radius  5px  x000D    background   e7e7e7  x000D    border  1px solid  c5c5c5  x000D    x000D   x000D   x000D    Mozilla thumb   x000D   x000D  input type  range    -moz-range-thumb   x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    -moz-border-radius  5px  x000D    height  14px  x000D    width  14px  x000D    border-radius  5px  x000D    background   e7e7e7  x000D    border  1px solid  c5c5c5  x000D    x000D   x000D   x000D    IE  amp  Edge input   x000D   x000D  input type range   -ms-track   x000D    width  300px  x000D    height  6px  x000D      remove bg colour from the track  we ll use ms-fill-lower and ms-fill-upper instead    x000D    background  transparent  x000D      leave room for the larger thumb to overflow with a transparent border    x000D    border-color  transparent  x000D    border-width  2px 0  x000D      remove default tick marks   x000D    color  transparent  x000D    x000D   x000D   x000D    IE  amp  Edge thumb   x000D   x000D  input type range   -ms-thumb   x000D    height  14px  x000D    width  14px  x000D    border-radius  5px  x000D    background   e7e7e7  x000D    border  1px solid  c5c5c5  x000D    x000D   x000D   x000D    IE  amp  Edge left side   x000D   x000D  input type range   -ms-fill-lower   x000D    background   919e4b  x000D    border-radius  2px  x000D    x000D   x000D   x000D    IE  amp  Edge right side   x000D   x000D  input type range   -ms-fill-upper   x000D    background   c5c5c5  x000D    border-radius  2px  x000D    x000D   x000D   x000D    IE disable tooltip   x000D   x000D  input type range   -ms-tooltip   x000D    display  none  x000D    x000D   x000D  input type  text     x000D    border  none  x000D    x000D   lt input type  range  value  80  min  10  max  100  step  1    gt  x000D   lt input type  text  value  80  size  3    gt  x000D   x000D   x000D

User · Answer

The previous accepted solution is not working any longer   I ended up coding a simple function which wraps the range into a styled container adding the bar that is needed before the cursor  I wrote this example where easy to see the two colors  blue  and  orange  set in the css  so they can be quickly modified

User · Answer

If you use first answer  there is a problem with thumb  In chrome if you want the thumb to be larger than the track  then the box shadow overlaps the track with the height of the thumb  Just sumup all these answers and wrote normally working slider with larger slider thumb  jsfiddle  x000D   x000D  const slider   document getElementById  myinput   const min   slider min const max   slider max const value   slider value  slider style background    linear-gradient to right  red 0   red    value-min   max-min  100     DEE2E6    value-min   max-min  100     DEE2E6 100     slider oninput   function       this style background    linear-gradient to right  red 0   red    this value-this min   this max-this min  100     DEE2E6    this value-this min   this max-this min  100     DEE2E6 100       x000D   myinput     border-radius  8px    height  4px    width  150px    outline  none    -webkit-appearance  none     input type  range    -webkit-slider-thumb     width  6px    -webkit-appearance  none    height  12px    background  black    border-radius  2px    x000D   lt div class  chrome  gt     lt input id  myinput  type  range  min  0  value  25  max  200    gt   lt  div gt  x000D   x000D   x000D

User · Answer

A small update to this one   if you use the following it will update on the fly rather than on mouse release    change mousemove   function    lt script gt     input type  range     on  change mousemove   function          var val      this  val   -   this  attr  min         this  attr  max   -   this  attr  min            this  css  background-image                    -webkit-gradient linear  left top  right top                       color-stop     val       2f466b                        color-stop     val       d3d3db                                                lt  script gt

User · Answer

Pure CSS solution    Chrome  Hide the overflow from input range   and fill all the space left to thumb with shadow color  IE  no need to reinvent the wheel    -ms-fill-lower Firefox  no need to reinvent the wheel    -moz-range-progress    x000D   x000D    Chrome   x000D   media screen and  -webkit-min-device-pixel-ratio 0    x000D      input type  range     x000D        overflow  hidden  x000D        width  80px  x000D        -webkit-appearance  none  x000D        background-color   9a905d  x000D        x000D       x000D      input type  range    -webkit-slider-runnable-track   x000D        height  10px  x000D        -webkit-appearance  none  x000D        color   13bba4  x000D        margin-top  -1px  x000D        x000D       x000D      input type  range    -webkit-slider-thumb   x000D        width  10px  x000D        -webkit-appearance  none  x000D        height  10px  x000D        cursor  ew-resize  x000D        background   434343  x000D        box-shadow  -80px 0 0 80px  43e5f7  x000D        x000D   x000D    x000D      FF   x000D  input type  range    -moz-range-progress   x000D    background-color   43e5f7   x000D    x000D  input type  range    -moz-range-track     x000D    background-color   9a905d  x000D    x000D     IE   x000D  input type  range    -ms-fill-lower   x000D    background-color   43e5f7   x000D    x000D  input type  range    -ms-fill-upper     x000D    background-color   9a905d  x000D    x000D   lt input type  range   gt  x000D   x000D   x000D

User · Answer

input type  range  min  0  max  50  value  0   style  margin-left  6  width  88  background-color  whitesmoke     above code changes range input style

User · Answer

It s now supported with pseudo elements in each of WebKit  Firefox and IE  But  of course  it s different in each one       See this question s answers and or search for a CodePen titled prettify  lt input type range gt   101 for some solutions

User · Answer

While the accepted answer is good in theory  it ignores the fact that the thumb then cannot be bigger than size of the track without being chopped off by the overflow  hidden  See this example of how to handle this with just a tiny bit of JS   x000D   x000D      chrome styling Vanilla JS  document getElementById  myinput   oninput   function       var value    this value-this min   this max-this min  100   this style background    linear-gradient to right   82CFD0 0    82CFD0     value        fff     value       white 100       x000D   myinput     background  linear-gradient to right   82CFD0 0    82CFD0 50    fff 50    fff 100      border  solid 1px  82CFD0    border-radius  8px    height  7px    width  356px    outline  none    transition  background 450ms ease-in    -webkit-appearance  none    x000D   lt div class  chrome  gt     lt input id  myinput  min  0  max  60  type  range  value  30    gt   lt  div gt  x000D   x000D   x000D

[css] How to style HTML5 range input to have different color before and after slider?

Examples related to css

Examples related to html

Examples related to input

Examples related to webkit