CSS：如何设置 HTML5 输入范围以在拇指前具有不同的背景颜色和宽度？

Question

I am working with a HTML5 input range, and I need to style the slider to have a different colour ( black ) and width( 2px ) up to the position of the slider and to have it set to have #393837 and 1px after the slider .
为了说明下图，它之前更暗更厚，之后更薄：

到目前为止，我所取得的成就是，在整个 slider 中都有#393837颜色。

 .slider { width: 100%; height: 1px; outline: none; background: #393837; -webkit-appearance: none; }.slider::-webkit-slider-thumb { width: 8px; height: 8px; cursor: pointer; appearance: none; background: black; border-radius: 50%; -webkit-appearance: none; }.slider::-moz-range-thumb { width: 8px; height: 8px; border: none; cursor: pointer; border-radius: 50%; background: black; }

 <input min="1" max="100" type="range" className="slider" />

PS我正在使用reactJS，所以我不想使用jQuery

注意：我的问题已被标记为重复，但另一个问题中的解决方案是对输入元素使用硬编码宽度，而我没有。

Answer 1

通过使用“幻觉”元素假装是 slider 的一部分，您可以实现您想要的效果。

到目前为止，我对 ReactJS 还不是很熟悉，所以我用普通的 javascript 对其进行了编码，但它应该很容易转换为反应代码。

通过监听 slider 上的更改和输入事件，您可以更新“幻觉”以变小或变大。
通过听幻觉的点击，可以让slider有较大的值，然后触发change事件更新幻觉的宽度。

请注意，我在代码中使用了范围引用。 根据您的代码库，您可能希望创建这些 class 属性或在每次触发事件时重新获取它们。

希望这能给你足够的灵感来提出一个反应解决方案。

 /** * getting all the sliders in the document. * define how big the thumb is here. */ const SLIDER_THUMB_SIZE = 8; Array.from(document.querySelectorAll('.slider')).forEach(function(element) { /** a reference to our illusion of a slider **/ let illusion = element.parentNode.querySelector('.slider-illusion'); /** We need this to save our state without having to look it up on the element **/ let currentWidth; /** Our change handler, to update the width of our thin slider piece **/ let changeWidth = (e) => { /** get the current actual width of our input element **/ let width = parseInt(window.getComputedStyle(element).getPropertyValue("width")); /** Calculate the left offset **/ let left = ((element.value - element.min) / (element.max - element.min)) * ((width - SLIDER_THUMB_SIZE)) + SLIDER_THUMB_SIZE * 1.25; /** set the proper width **/ illusion.style.width = (width - left + SLIDER_THUMB_SIZE) + "px"; /** update out position **/ illusion.style.left = left+"px"; }; /** When a click is registered on the illusion, we need to update our value in the slider. **/ let illusionTrigger = (e) => { /** Where was clicked in the illusion? **/ let offset = e.offsetX; /** how wide are the parts in our illusion for each change **/ let part = illusion.clientWidth / (element.max - element.value); /** calculate the value that needs to be added to the current slider value **/ let change = Math.round(offset / part); /** force a change if there is a click behind the thumb **/ if(change == 0) { change = 1; } /** update the slider **/ element.value = parseInt(element.value) + change; /** Trigger a change notification and a redraw of the illusion **/ element.dispatchEvent(new Event('change')); }; /** trigger it once to update everything to the correct position **/ changeWidth(); /** bind the event handler to the input and change event to enable dragging of the thumb**/ element.addEventListener('input', changeWidth); element.addEventListener('change', changeWidth); let forFun = (e) => { document.getElementById(element.name).innerText = element.value; }; element.addEventListener('input', forFun); element.addEventListener('change', forFun); /** listen to the click event on the illusion **/ illusion.addEventListener('click', illusionTrigger); });

 .slider-container { position:relative; height: 10px; width: 100%; overflow: hidden; }.slider-illusion { position: absolute; top:0px; background: white;; width: 50%; left: calc(50% + 2px); height:10px; cursor: pointer; }.slider-illusion.line { position: absolute; top: 3px; height: 2px; background-color: black; width: 100%; }.slider { /** * absolute positioning to assure both elements align the same */ position:absolute; top:0px; left:0px; width: 100%; height: 5px; outline: none; background: #393837; -webkit-appearance: none; }.slider::-webkit-slider-thumb { width: 8px; height: 8px; cursor: pointer; appearance: none; background: black; border-radius: 50%; -webkit-appearance: none; }.slider::-moz-range-thumb { width: 8px; height: 8px; border: none; cursor: pointer; border-radius: 50%; background: black; }

 Select how many cups you want: <span id="cups">3</span>/5 <div class="slider-container"> <input min="1" max="5" value="3" type="range" class="slider" name="cups" /> <div class="slider-illusion" data-width="50%"> <div class="line"></div> </div> </div> <br> Select how many balls you want: <span id="balls">125</span>/500 <div class="slider-container"> <input min="1" max="500" value="125" type="range" class="slider" name="balls" /> <div class="slider-illusion" data-width="50%"> <div class="line"></div> </div> </div> <br> select how many rounds to play: <span id="rounds">3</span>/10 <div class="slider-container"> <input min="1" max="10" value="3" type="range" class="slider" name="rounds"/> <div class="slider-illusion" data-width="50%"> <div class="line"></div> </div> </div>