Home>

javascript : The color of the input track is ahead of the thumb, how to fix it in JS?

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>
javascript css input background rangeslider
  • 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>