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: 10px0;
  color:#0b867a;
}
.AgeRangeDiv {
  border: 1px solid $ee;
  background: $ff;
  padding: 3px5px5px12px;
  border-radius: 4px;
}
.ranges-container {
  display: flex;
}
.ranges-container.range {
  width: 50%;
}
.ranges-container.rangeinput[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: 100vw00100vw lightblue;
}
.right::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; 
    height: 20px;
    background: #ddd;
    border: 1px solid black;
    box-shadow: -100vw00100vw lightblue;
}

<divclass="AgeRangeDiv"><divclass="AgeRangeLabel">Age Range</div><divclass="ranges-container"><divclass="range"><inputtype="range"min="18"max="55"label="Min"value="39"class="AgeRange left"><spanclass="AgeNum"><spanclass="text-mute">Min</span><spanclass="text-success text-bold pl2">39</span></span></div><divclass="range"><inputtype="range"min="39"max="55"label="Max"value=""class="AgeRange right"><spanclass="AgeNum"><spanclass="text-mute">Max</span><spanclass="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! :)