如何修复不遵循输入范围拇指的自定义范围滑块进度？

Question

我正在尝试使用HTML/CSS 中的jQuery 为 Google Chrome 浏览器制作带有进度条的自定义范围滑块。 我想制作一个带有进度条的输入类型范围，该进度条跟在输入拇指之后，不像我的自定义输入范围。

我的代码如下：

 var range2 = $("#newSlider"); var progressBar2 = $(".progressslider"); $(range2).on("input change", function() { progressBar2.css("width", $(this).val() + "%"); rangeValue.text($(this).val() + "%"); });

 .boxslider { width: 400px; position: relative; } #newSlider { -webkit-appearance: none; width: 400px; height: 20px; background-color: black; outline: none; cursor: pointer; } #newSlider::-webkit-slider-thumb { width: 30px; height: 30px; background-color: rgb(243, 12, 12); border-radius: 50%; -webkit-appearance: none; position: relative; z-index: 5; cursor: pointer; } .progressslider { width: 10px; height: 20px; background-color: rgb(224, 84, 91); position: absolute; top: 2px; left: 0; pointer-events: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boxslider"> <input type="range" id="newSlider" min="0" max="100" value="5"> <div class="progressslider"></div> </div>

Answer 1

将rangeValue更改为$(this)

 var range2 = $("#newSlider"); var progressBar2 = $(".progressslider"); $(range2).on("input change", function() { progressBar2.css("width", $(this).val() + "%"); console.log(this) $(this).text($(this).val() + "%"); });

 .boxslider { width: 400px; position: relative; } #newSlider { -webkit-appearance: none; width: 400px; height: 20px; background-color: black; outline: none; cursor: pointer; } #newSlider::-webkit-slider-thumb { width: 30px; height: 30px; background-color: rgb(243, 12, 12); border-radius: 50%; -webkit-appearance: none; position: relative; z-index: 5; cursor: pointer; } .progressslider { width: 10px; height: 20px; background-color: rgb(224, 84, 91); position: absolute; top: 2px; left: 0; pointer-events: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boxslider"> <input type="range" id="newSlider" min="0" max="100" value="5"> <div class="progressslider"></div> </div>

Answer 2

您想考虑句柄宽度，即 CSS 看起来像这样：

width: calc(15px + ${$(this).val()} * (100% - 30px));

其中30px是手柄宽度， 15px是它的一半， ${$(this).val()}是0和1之间的滑块的当前值。

事实上，您不需要单独的div ，但可以使用渐变来填充轨道的不同部分。

您可以使用输入范围滑块 CSS 样式器来拨入（以及更多）以跨浏览器设置输入范围滑块的样式。 我使手柄颜色透明，以便您可以看到进度是如何绘制的：

 for (let e of document.querySelectorAll('input[type="range"].slider-progress')) { e.style.setProperty('--value', e.value); e.style.setProperty('--min', e.min == '' ? '0' : e.min); e.style.setProperty('--max', e.max == '' ? '100' : e.max); e.addEventListener('input', () => e.style.setProperty('--value', e.value)); }

 /*generated with Input range slider CSS style generator (version 20211219) https://toughengineer.github.io/demo/slider-styler*/ input[type=range].styled-slider { height: 32px; -webkit-appearance: none; } /*progress support*/ input[type=range].styled-slider.slider-progress { --range: calc(var(--max) - var(--min)); --ratio: calc((var(--value) - var(--min)) / var(--range)); --sx: calc(0.5 * 30px + var(--ratio) * (100% - 30px)); } input[type=range].styled-slider:focus { outline: none; } /*webkit*/ input[type=range].styled-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #F30C0C80; border: none; box-shadow: none; margin-top: calc(1em * 0.5 - 30px * 0.5); } input[type=range].styled-slider::-webkit-slider-runnable-track { height: 1em; border: none; border-radius: 0; background: #000000; box-shadow: none; } input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track { background: linear-gradient(#E0545B,#E0545B) 0/var(--sx) 100% no-repeat, #000000; } /*mozilla*/ input[type=range].styled-slider::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #F30C0C80; border: none; box-shadow: none; } input[type=range].styled-slider::-moz-range-track { height: 1em; border: none; border-radius: 0; background: #000000; box-shadow: none; } input[type=range].styled-slider.slider-progress::-moz-range-track { background: linear-gradient(#E0545B,#E0545B) 0/var(--sx) 100% no-repeat, #000000; } /*ms*/ input[type=range].styled-slider::-ms-fill-upper { background: transparent; border-color: transparent; } input[type=range].styled-slider::-ms-fill-lower { background: transparent; border-color: transparent; } input[type=range].styled-slider::-ms-thumb { width: 30px; height: 30px; border-radius: 50%; background: #F30C0C80; border: none; box-shadow: none; margin-top: 0; box-sizing: border-box; } input[type=range].styled-slider::-ms-track { height: 1em; border-radius: 0; background: #000000; border: none; box-shadow: none; box-sizing: border-box; } input[type=range].styled-slider.slider-progress::-ms-fill-lower { height: 1em; border-radius: 0px 0 0 0px; margin: -undefined 0 -undefined -undefined; background: #E0545B; border: none; border-right-width: 0; }

 <input type="range" class="styled-slider slider-progress" style="width:400px;"/>