CSS - Two way slider grey out unselected areas

Question

I have a slider that allows a user to select the min and max of a range. I'm trying to make the slider bar that is unselected to be grey, instead of the normal color. For example, if the min thumb was at 25, and the max thumb was at 75 - the bar below 25 would be grey, the bar between 25-75 would be blue, and above 75 would again be grey.

I used this fiddle (and posted below) to create the the slider and also using Vue. This question is achieving what I want for a one-way slider but I'm not sure if I can apply a similar solution?

var vm = new Vue({
  el: '#app',
  data: {
    minAngle: 10,
    maxAngle: 30
  },
  computed: {
    sliderMin: {
      get: function() {
        var val = parseInt(this.minAngle);
        return val;
      },
      set: function(val) {
        val = parseInt(val);
        if (val > this.maxAngle) {
          this.maxAngle = val;
        }
        this.minAngle = val;
      }
    },
    sliderMax: {
      get: function() {
        var val = parseInt(this.maxAngle);
        return val;
      },
      set: function(val) {
        val = parseInt(val);
        if (val < this.minAngle) {
          this.minAngle = val;
        }
        this.maxAngle = val;
      }
    }
  }
});

.range-slider {
  width: 300px;
  margin: auto;
  text-align: center;
  position: relative;
  height: 6em;
}

.range-slider input[type=range] {
  position: absolute;
  left: 0;
  bottom: 0;
}

input[type=number] {
  border: 1px solid #ddd;
  text-align: center;
  font-size: 1.6em;
  -moz-appearance: textfield;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type=number]:invalid,
input[type=number]:out-of-range {
  border: 2px solid #ff6347;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}

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

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #2497e3;
}

input[type=range]:focus::-ms-fill-lower {
  background: #2497e3;
}

input[type=range]:focus::-ms-fill-upper {
  background: #2497e3;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: #2497e3;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}

input[type=range]::-webkit-slider-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #2497e3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class='range-slider'>
    <input type="range" min="0" max="180" step="1" v-model="sliderMin">
    <input type="number" min="0" max="180" step="1" v-model="sliderMin">
    <input type="range" min="0" max="180" step="1" v-model="sliderMax">
    <input type="number" min="0" max="180" step="1" v-model="sliderMax">
  </div>
</div>

CSS - Two way slider grey out unselected areas

0 Answers0