Style input range background before thumb

问题

I want to style the bar before the thumb with a different color on a range input. I'v tried looking for a solution but I havent found a proper solution. This is what I need it to look like:

Chrome doesnt seem to support input[type='range']::-webkit-slider-thumb:before anymore and I am at a loss how to style it. Here's what I have so far:

input[type='range'] {
    min-width: 100px;
    max-width: 200px;
    &::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        background-color: @white;
        border: 1px solid @gray-4;
        height: 14px;
        width: 14px;
        &:hover,
        &:focus,
        &:active {
            border-color: @blue;
            background-color: @gray-2;
        }
    }
    &::-webkit-slider-runnable-track {
        background-color: @gray-2;
        border: 1px solid @gray-4;
    }
}

回答1:

document.querySelectorAll(".__range").forEach(function(el) {       
  el.oninput =function(){            
  var valPercent = (el.valueAsNumber  - parseInt(el.min)) / 
                      (parseInt(el.max) - parseInt(el.min));
    var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
    el.style = style;
  };
  el.oninput();
});

.__range{
  margin:30px 0 20px 0;
  -webkit-appearance: none;
  background-color: #f5f6f8;
  height: 3px;
  width: 100%;
  margin: 10px auto;
}
.__range:focus{
  outline:none;
}
.__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #29907f;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab; 
}

<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1">

回答2:

The trick in the post referenced by shambalambala is clever, but I don't think it will work in this case if you want to get something that looks exactly like the image you show. The approach there is to put a shadow on the thumb to create the different coloring to the left of the thumb. Since the shadow extends in the vertical, as well as the horizontal, direction, you also have to add overflow:hidden to the range or the track in order to clip the shadow. Unfortunately, this also clips the thumb. So if you want a thumb that extends beyond the track in the vertical dimension, such as in the image you show where the thumb is a circle with a diameter larger than the track width, this won't work.

I'm not sure there's a pure CSS solution to this problem. With JavaScript, one way around this is to make two range elements that overlap exactly. For one range element, you will see only the thumb and for one you will see only the track. You can use the shadow approach on the track element to get the different color before the thumb. You can style the thumb on the thumb range however you want, and since overflow is not set to hidden for this range element, it can extend beyond the width of the track. You can then use JavaScript to yoke the two range elements together, so that when you move the thumb on the thumb-visible element, the value of the track-visible element also changes.

For example (works in webkit browsers--will need some additional styling for other browsers):

<html>
  <head>
  
  <style>

  .styled_range {
    position: relative;
    padding: 10px;
  }

  input[type=range] {
    -webkit-appearance: none;
    width: 600px;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
  }

  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }

  input[type=range]:focus {
    outline: none;
  }

  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
  }

  .track_range {
    pointer-events: none;
  }

  .track_range::-webkit-slider-runnable-track {
    background: #D0D0D0;
    border-radius: 6px;
    overflow: hidden;
  }  

  .track_range::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: transparent;
    height: 1px;
    width: 1px;
    box-shadow: -600px 0 0 600px #666666;
  }

  .thumb_range::-webkit-slider-runnable-track {
    background: transparent;
    cursor: pointer;
  }

  .thumb_range::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 3px solid #ffffff;
    border-radius: 20px;
    height: 40px;
    width: 40px;
    background: #1180AD;
    cursor: pointer;
    margin: -12px 0px 0px 0px;
  }


  </style>
  </head>
  <body>
    <form>
    <div class="styled_range">
      <input type="range" class="track_range"/>
      <input type="range" class="thumb_range"/>
    </div>
    <br/>
    <div class="styled_range">
      <input type="range" class="track_range"/>
      <input type="range" class="thumb_range"/>
    </div>
    </form>
  </body>

  <script>

  window.onload = function() {
    var styledRanges = document.getElementsByClassName('styled_range');
    for (var i=0; i<styledRanges.length; i++) {
      var thumbRange = null, trackRange = null;
      for (var j=0; j<styledRanges[i].children.length; j++) {
        var child = styledRanges[i].children[j];
        if (child.className === 'thumb_range')
          var thumbRange = child;
        else if (child.className === 'track_range')
          var trackRange = child;
      }
      thumbRange.oninput = function(thumbRange, trackRange) {
        return function(e) {
          trackRange.value = thumbRange.value;
        };
      }(thumbRange, trackRange);
    }
  }


  </script>
</html>

来源：https://stackoverflow.com/questions/43771735/style-input-range-background-before-thumb

标签

javascript

jquery

html

css

less