0

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 part between sliders can be blue, it will help user see what range they selected.

See snippet below.

.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%;
}
<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">
      <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">
      <span class="AgeNum">
        <span class="text-mute">Max</span>
        <span class="text-success text-bold pl2">48</span>
      </span>
    </div>
  </div>
</div>

enter image description here

AZSWQ
  • 199
  • 5
  • 24
  • You might want to take a look here [link](https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider) – luenib Sep 14 '18 at 03:44
  • I did look at it before posting question. Thats a really old post from 2013 and things have changed a lot with browsers. Also, I have two ranges side by side and a fiddle added to the question. Thanks – AZSWQ Sep 14 '18 at 03:45
  • The solution I'm talking about is from '16 **Pure CSS solution**, it still works today. I know your code includes two ranges, but, why not try to adapt the proposed solution to the one you want? – luenib Sep 14 '18 at 03:58

1 Answers1

0

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! :)

Daniel Neely
  • 1