I'm trying to build an input range slider bar, but I'm running into a problem.
body { justify-content: center; align-items: center; min-height: 100vh; background: #151515; } #rangeValue { position: relative; display: block; font-size: 6em; color: #999; font-weight: 400; } .range { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important; width: 400px; height: 5px; -webkit-appearance: none; background: #111; outline: none; border-radius: 15px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 1); } .range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: blue; cursor: pointer; box-shadow: -507px 0 0 500px red; } 0
The problem is: I want this big red area to remain within the input slider when drawn. The only solution is to apply overflow: hidden to .range but I will lose the blue dot button. Is there a way to just apply overflow: hidden to box-shadow? Or any clues on other ways to make it work?
The final result should be like this =>
Thank you.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I'm not sure if this helps, but here's the refactoring I did. Maybe you can make some modifications to suit your task.
HTML
CSS
body { justify-content: center; align-items: center; min-height: 100vh; background: #151515; } #rangeValue { position: relative; display: block; font-size: 6em; color: #999; font-weight: 400; } /* Input Thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ff4500; cursor: ew-resize; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } input[type="range"]::-moz-range-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ff4500; cursor: ew-resize; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } input[type="range"]::-ms-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ff4500; cursor: ew-resize; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } /* Input Track */ input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; } input[type=range]::-moz-range-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; }JS
const rangeInputs = document.querySelectorAll('input[type="range"]') function handleInputChange(e) { let target = e.target if (e.target.type !== 'range') { target = document.getElementById('range') } const min = target.min const max = target.max const val = target.value target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%' } rangeInputs.forEach(input => { input.addEventListener('input', handleInputChange) })You can adjust it to your liking. Hope this helps.