使用 jQuery 制作自定義范圍 slider

Question

我創建了一個自定義 slider。 當我拖動 slider 手柄時，我想讓標記的 position 發生變化。 然而，隨着值變大，標記和手柄之間的間隙越來越大。

我認為問題與使用margin-left / left或absolute / relative定位有關。

誰能幫我弄清楚我的 position 的概念是否錯誤？

 $(function() { $('.h-rs-line').on('input', function() { var val = $(this).val(); var min = $(this).attr('min'); var max = $(this).attr('max'); var portion = (val - min) / (max - min); $('.h-rs-indicator').text(val); $('.h-rs-indicator').css('left', portion * $('.h-rs-line').width()); }); });

 body { background: #000; }.h-rs { position: relative; }.h-rs-index { color: #FFF; }.h-rs-container { display: flex; flex-direction: column; margin: 32px; }.h-rs-indicator { display: block; width: 50px; height: 35px; border-radius: 12px; text-align: center; line-height: 35px; background: #FFF; position: absolute; top: -30px; left: 0; margin-left: -16px; }.h-rs-indicator::after { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid #FFF; position: absolute; top: 98%; left: 50%; margin-left: -8px; }.h-rs-line { width: 300px; margin-top: 24px; -webkit-appearance: none; border-radius: 24px; }.h-rs-line::-webkit-slider-runnable-track { -webkit-appearance: none; height: 7px; border-radius: 24px; }.h-rs-line::-webkit-slider-thumb { -webkit-appearance: none; background: #FFF; height: 18px; width: 18px; border-radius: 100%; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25); margin-top: -5.5px; }.h-rs-index { display: flex; margin-top: 9px; width: 300px; justify-content: space-between; }.h-rs-index span:first-child { margin-left: 6.5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="h-rs-container"> <div class="h-rs"> <span class="h-rs-indicator">0<span></span></span> <input class="h-rs-line" type="range" value="0" min="0" max="100" /> </div> <div class="h-rs-index"> <span>0</span><span>100</span> </div> </div>

Answer 1

補償拇指寬度

您忘記補償 slider 拇指范圍的大小。 slider 拇指只能移動 slider 的寬度減去拇指的大小（所以 300px 減去 ~18px）。 因為拇指只能移動 282px，label 也應該這樣，否則它們會不同步。

因此：

$('.h-rs-indicator').css('left', portion * $('.h-rs-line').width());

...應該變成這樣：

$('.h-rs-indicator').css('left', portion * ($('.h-rs-line').width() - 18));

... 其中 18 是 slider 拇指范圍的寬度（以像素為單位）。

 $(function() { $('.h-rs-line').on('input', function() { var val = $(this).val(); var min = $(this).attr('min'); var max = $(this).attr('max'); var portion = (val - min) / (max - min); $('.h-rs-indicator').text(val); $('.h-rs-indicator').css('left', portion * ($('.h-rs-line').width() - 18)); }); });

 body { background: #000; }.h-rs { position: relative; }.h-rs-index { color: #FFF; }.h-rs-container { display: flex; flex-direction: column; margin: 32px; }.h-rs-indicator { display: block; width: 50px; height: 35px; border-radius: 12px; text-align: center; line-height: 35px; background: #FFF; position: absolute; top: -30px; left: 0; margin-left: -16px; }.h-rs-indicator::after { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid #FFF; position: absolute; top: 98%; left: 50%; margin-left: -8px; }.h-rs-line { width: 300px; margin-top: 24px; -webkit-appearance: none; border-radius: 24px; }.h-rs-line::-webkit-slider-runnable-track { -webkit-appearance: none; height: 7px; border-radius: 24px; }.h-rs-line::-webkit-slider-thumb { -webkit-appearance: none; background: #FFF; height: 18px; width: 18px; border-radius: 100%; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25); margin-top: -5.5px; }.h-rs-index { display: flex; margin-top: 9px; width: 300px; justify-content: space-between; }.h-rs-index span:first-child { margin-left: 6.5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="h-rs-container"> <div class="h-rs"> <span class="h-rs-indicator">0<span></span></span> <input class="h-rs-line" type="range" value="0" min="0" max="100" /> </div> <div class="h-rs-index"> <span>0</span><span>100</span> </div> </div>

---

跨瀏覽器

讓您的范圍 slider 在每個瀏覽器中看起來都相同（並且大小相同）涉及很多 CSS。 這在這篇關於 CSS 技巧的文章中得到了很好的解釋： https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

---

非 jQuery

從 jQuery 重寫為非 jQuery 怎么樣？ 這可能會更輕......像這樣的東西：

<input type="range" min="0" max="100" oninput="updateRangeSlider(this)" onchange="updateRangeSlider(this)" />

在頁腳中使用此 function：

function updateRangeSlider(el){
    var val = el.value;
    var min = el.getAttribute('min');
    var max = el.getAttribute('max');
    var portion = (val - min) / (max - min);
    var iel = el.parentNode.querySelector('.h-rs-indicator');
    iel.innerHTML = val + '<span></span>';
    iel.style.left = (portion * (el.offsetWidth-18)) + 'px';
} 

請注意，此 function 是可重復使用的。