-2

I'm using this code to change the style of a slider, but so far I can't find the way to change the left side:

.slider {
  -webkit-appearance: none; 
  appearance: none;
  width: 100%; 
  height: 2px; 
  background: #ffffff; 
  outline: none; 
  opacity: 0.7; 
  -webkit-transition: 0.2s; 
  transition: opacity 0.2s;
}
<div class="slidecontainer">
  <input
    type="range"
    min="1"
    max="100"
    value="50"
    class="slider"
    id="myRange"
  />
</div>
Joshua Wade
  • 4,755
  • 2
  • 24
  • 44
Thameur Saadi
  • 159
  • 1
  • 8
  • 2
    Does this answer your question? [How to style HTML5 range input to have different color before and after slider?](https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider) – GalAbra Sep 14 '20 at 10:05
  • Does this answer your question? [Style input range background before thumb](https://stackoverflow.com/questions/43771735/style-input-range-background-before-thumb). This is exactly answer here. – Rayees AC Sep 14 '20 at 10:17
  • i tried those two before i post the question and it's just changing the background of the slider not only the left side – Thameur Saadi Sep 14 '20 at 11:10
  • The examples in those answers all work. If they don't work for you, then you are doing something wrong and you'll need to post the code you are using. – RoToRa Sep 14 '20 at 11:32

1 Answers1

1

You can use background: linear-gradient(...); with an onchange JS event

document.querySelector('.slidecontainer > input').onchange = function(e){
  this.style.background = 'linear-gradient(to right, red, red ' + this.value + '%, yellow ' + this.value + '%)';
};
.slider {
  -webkit-appearance: none; 
  appearance: none;
  width: 100%; 
  height: 2px; 
  background:
      linear-gradient(
          to right, 
          red,
          red 50%,
          yellow 50%
      ); 
  outline: none; 
  opacity: 0.7; 
  -webkit-transition: 0.2s; 
  transition: opacity 0.2s;
}
<div class="slidecontainer">
  <input
    type="range"
    min="1"
    max="100"
    value="50"
    class="slider"
    id="myRange"
  />
</div>
SeeoX
  • 565
  • 3
  • 18