使用 jQuery 制作自定义范围滑块

Question

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

我认为问题与使用 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

补偿拇指宽度

您忘记补偿范围滑块拇指的大小。滑块滑块只能移动滑块的宽度减去滑块的大小（所以 300px 减去 ~18px）。因为拇指只能移动 282px，标签也应该如此，否则它们会不同步。

因此：

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

...应该变成这样：

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

... 其中 18 是以像素为单位的范围滑块滑块的宽度。

$(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>

跨浏览器

让您的范围滑块在每个浏览器中看起来相同（并且大小相同）涉及很多 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';
}

请注意，此函数可重复使用。

使用 jQuery 制作自定义范围滑块

Make a custom range slider using jQuery

javascript

jquery

html

css

rangeslider

补偿拇指宽度

跨浏览器

非jQuery