Home>

Here's an example of how the background color is ahead of the slider itself. How do I fix this regardless of the maximum and minimum input limit, without creating a smooth transition from green to white?

const sliderInput= document.querySelector('.slider--input');
let sliderValue= document.querySelector('.slider--value-end');
const sliderValueMoved= document.querySelector('.slider--value-end-moved');
sliderInput.oninput= function() {
  const inputValueNumb= sliderInput.value;
  sliderValue.innerHTML= sliderInput.value;
  sliderValueMoved.innerHTML= sliderInput.value;
  sliderValueMoved.style.left= `${8 + (this.clientWidth -28) /120 * (inputValueNumb)}px`;
}
sliderInput.addEventListener('mousemove', function () {
  sliderInput.style.background= 'linear-gradient(90deg, green ' + this.value + '%, white ' + this.value + '%)';
})
*,
*::after,
*::before {
  box-sizing: border-box;
}
body {
  background-color: aquamarine;
}
.slider {
  display:flex;
  justify-content: center;
  width: 100%
  margin: 0;
  padding: 0;
  margin-top: 100px;
}
.slider--body {
  /* position: relative; */
  display:flex;
  justify-content: center;
  align-items: center;
}
.range {
  position: relative;
  margin: 0 10px;
}
.slider--value-end-moved {
  top: -30px;
  position: absolute;
  left: 8px;
}
/* .slider--body > *:not(:last child) {
  margin-right: 10px;
} */
.slider--input {
  appearance: none;
  align-items: center;
  height: 5px;
  width: 500px
  background: linear-gradient(90deg, white 60%, white 60%);
}
.slider--input::-webkit-slider-thumb {
  appearance: none;
  width: 20px
  height: 20px;
  background color: white
  border: 5px solid green;
  border-radius: 50%
  cursor: pointer;
}
<!DOCTYPE html><htmllang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link rel="stylesheet" href="style.css" />    <title>Range Slider</title>  </head>  <body>    <div class="slider">      <div class="slider--body">        <span class="slider--value-start">0</span>        <div class="range">          <input class="slider--input" type="range" min="0" , max="120" step="1" value="0" />          <span class="slider--value-end-moved">0</span>        </div>        <span class="slider--value-end">0</span>      </div>    </div>    <script src="range-slider.js"></script>  </body></html>
  • Answer # 1
    const sliderInput= document.querySelector('.slider--input');
    let sliderValue= document.querySelector('.slider--value-end');
    const sliderValueMoved= document.querySelector('.slider--value-end-moved');
    sliderInput.oninput= function() {
      const inputValueNumb= sliderInput.value;
      sliderValue.innerHTML= sliderInput.value;
      sliderValueMoved.innerHTML= sliderInput.value;
      sliderValueMoved.style.left= `${8 + (this.clientWidth -28) /120 * (inputValueNumb)}px`;
    }
    sliderInput.addEventListener('mousemove', function() {
      let percent= this.value /this.max * 100;
      sliderInput.style.background= 'linear-gradient(90deg, green ' + percent + '%, white ' + percent + '%)';
    })
    *,
    *::after,
    *::before {
      box-sizing: border-box;
    }
    body {
      background-color: aquamarine;
    }
    .slider {
      display:flex;
      justify-content: center;
      width: 100%
      margin: 0;
      padding: 0;
      margin-top: 100px;
    }
    .slider--body {
      /* position: relative; */
      display:flex;
      justify-content: center;
      align-items: center;
    }
    .range {
      position: relative;
      margin: 0 10px;
    }
    .slider--value-end-moved {
      top: -30px;
      position: absolute;
      left: 8px;
    }
    /* .slider--body > *:not(:last child) {
      margin-right: 10px;
    } */
    .slider--input {
      appearance: none;
      align-items: center;
      height: 5px;
      width: 500px
      background: linear-gradient(90deg, white 60%, white 60%);
    }
    .slider--input::-webkit-slider-thumb {
      appearance: none;
      width: 20px
      height: 20px;
      background color: white
      border: 5px solid green;
      border-radius: 50%
      cursor: pointer;
    }
    <!DOCTYPE html><htmllang="en"><head>  <meta charset="UTF-8" />  <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <link rel="stylesheet" href="style.css" />  <title>Range Slider</title></head><body>  <div class="slider">    <div class="slider--body">      <span class="slider--value-start">0</span>      <div class="range">        <input class="slider--input" type="range" min="0" , max="120" step="1" value="0" />        <span class="slider--value-end-moved">0</span>      </div>      <span class="slider--value-end">0</span>    </div>  </div>  <script src="range-slider.js"></script></body></html>
  • Answer # 2
    const sliderInput= document.querySelector('.slider--input');
    let sliderValue= document.querySelector('.slider--value-end');
    const sliderValueMoved= document.querySelector('.slider--value-end-moved');
    sliderInput.oninput= function() {
      const inputValueNumb= sliderInput.value;
      sliderValue.innerHTML= sliderInput.value;
      sliderValueMoved.innerHTML= sliderInput.value;
      sliderValueMoved.style.left= `${8 + (this.clientWidth -28) /120 * (inputValueNumb)}px`;
    }
    sliderInput.addEventListener('mousemove', function () {
      sliderInput.style.background= 'linear-gradient(90deg, green ' + (this.value -this.min) /(this.max -this.min) + '%, white ' + this.value + '%)' ;
    })
    *,
    *::after,
    *::before {
      box-sizing: border-box;
    }
    body {
      background-color: aquamarine;
    }
    .slider {
      display:flex;
      justify-content: center;
      width: 100%
      margin: 0;
      padding: 0;
      margin-top: 100px;
    }
    .slider--body {
      /* position: relative; */
      display:flex;
      justify-content: center;
      align-items: center;
    }
    .range {
      position: relative;
      margin: 0 10px;
    }
    .slider--value-end-moved {
      top: -30px;
      position: absolute;
      left: 8px;
    }
    /* .slider--body > *:not(:last child) {
      margin-right: 10px;
    } */
    .slider--input {
      appearance: none;
      align-items: center;
      height: 5px;
      width: 500px
      background: linear-gradient(90deg, white 60%, white 60%);
    }
    .slider--input::-webkit-slider-thumb {
      appearance: none;
      width: 20px
      height: 20px;
      background color: white
      border: 5px solid green;
      border-radius: 50%
      cursor: pointer;
    }
    <!DOCTYPE html><htmllang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link rel="stylesheet" href="style.css" />    <title>Range Slider</title>  </head>  <body>    <div class="slider">      <div class="slider--body">        <span class="slider--value-start">0</span>        <div class="range">          <input class="slider--input" type="range" min="0" , max="120" step="1" value="0" />          <span class="slider--value-end-moved">0</span>        </div>        <span class="slider--value-end">0</span>      </div>    </div>    <script src="range-slider.js"></script>  </body></html>