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
-
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>
Related questions
- javascript : Can't get value from input in google extension popup
- javascript : Block scrolling by clicking on the arrows
- javascript : Why is canvas not drawing?
- javascript : How to start SVG animation on button click?
- javascript : How to run autoplay swiper slider only at 640 resolution?
- javascript : How to select top element using css
- javascript : How to disable scrolling in safari?
- javascript : Slider image does not want to be displayed in JS
- javascript : Location of product cards with a line break