javascript - 使用 jQuery 制作自定义范围 slider

Question

我创建了一个自定义 slider 。我想在拖动 slider handle 时更改标记的位置。然而，随着值变大，标记和 handle 之间的间隙变大。

我认为问题在于使用 margin-left/left 或 absolute/relative 定位.

谁能帮我看看我的位置概念是不是错了？

$(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 只能移动 slider 的宽度减去 slider 的大小(所以 300px 减去 ~18px)。因为拇指只能移动 282 像素，标签也应该如此，否则它们将不同步。

因此:

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

...应该变成这样:

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

... 其中 18 是以像素为单位的范围 slider 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 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';
} 

请注意，此函数是可重用的。