Color Between Slider Handles Or Two Side By Side Html Ranges

Is it possible to add color only to the part between the handles of thw two range inputs. This is to show the range that the user selected. If the ends can remain uncolored and par

Solution 1:

I've solved this issue using Angular (version 7). It gives the ability to use [ngStyle] to reference the variables that have the values assigned to the buttons. That solution looks like this:

<input> ... [ngStyle]="{'background': 'linear-gradient(to right, #color1 ' + value1 + '%, #color2 ' + value1 + '%, #color2 ' + value1 + '%, #color1 ' + value2 + '%)'}"

Obviously inline-styling is not always the most ideal option, but the ability to reference the variables from your Typescript and use them to calculate the percentage is incredibly helpful for knowing where the colors need to change. For your example of the layout, and strictly HTML and CSS which it seems you're using, I recommend giving a (positive) box shadow to the range slider button on the left and a negative box shadow to the range slider button on the right. Hide the overflow and it should fill the input with color. Like this:

.AgeRange {
  width: 30%;
  margin-bottom: 20px;
}
.pl2 {
padding-left: 10px;
}
.AgeNum {
  position: relative;
  display: block;
  text-align: center;
}
.AgeRangeLabel {
  margin: 10px 0;
  color:#0b867a;
}
.AgeRangeDiv {
  border: 1px solid $ee;
  background: $ff;
  padding: 3px 5px 5px 12px;
  border-radius: 4px;
}
.ranges-container {
  display: flex;
}
.ranges-container .range {
  width: 50%;
}
.ranges-container .range input[type="range"] {
  width: 100%;
}

input[type="range"] {
    overflow: hidden;
    margin: auto;
    -webkit-appearance: none;
    position: relative;
    height: 20px;
    width: 400px;
    cursor: pointer;
}

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

.left::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; 
    height: 20px;
    background: #ddd;
    border: 1px solid black;
    box-shadow: 100vw 0 0 100vw lightblue;
}
.right::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; 
    height: 20px;
    background: #ddd;
    border: 1px solid black;
    box-shadow: -100vw 0 0 100vw lightblue;
}

<div class="AgeRangeDiv">
  <div class="AgeRangeLabel">Age Range</div>
  <div class="ranges-container">
    <div class="range">
      <input type="range" min="18" max="55" label="Min" value="39" class="AgeRange left">
      <span class="AgeNum">
        <span class="text-mute">Min</span>
        <span class="text-success text-bold pl2">39</span>
      </span>
    </div>
    <div class="range">
      <input type="range" min="39" max="55" label="Max" value="" class="AgeRange right">
      <span class="AgeNum">
        <span class="text-mute">Max</span>
        <span class="text-success text-bold pl2">48</span>
      </span>
    </div>
  </div>
</div>

This should just be an updated version on yours with what you are asking. Notice the classes "left" and "right." Hope this helps! :)