html - 如何使 [input type="range"] 滑块上的每个点与滑块拇指的位置相匹配？

Question

类似于Range 输入拇指会随着时间的推移而偏移

我有一个滑块范围，用于选择一个点。滑块上的每个点对应于该点的值。Min 和 Max 属性被 jQuery 覆盖。

<div class="range">
  <input id="form-range" type="range">

  <ul class="range-labels">
   <li class="range-label">0</li>
   <li class="range-label">1</li>
   <li class="range-label">2</li>
   <li class="range-label">3</li>
  </ul>
</div>

问题是每个标签都与滑块拇指不匹配（或者稍微偏移）。我已经使用jQuery计算了滑块的宽度，并抓取li了.range-labels类的每个子项，然后将每个子项的宽度设置为父项除以子项的数量（在这种情况下，.range是100%的宽度和输入，和 ul 是父级的全宽）。

jQuery

let range_input = $('#form-range'); // Get input element
let range_input_parent = range_input.parent(); // Get input element parent
let range_labels = $('.range-labels').children('li'); // Get each li inside of ul for labels
let range_width = range_input.width(); // Get width of input element

function calculateWidth() {
  // Get width of input parent
  let range_width_parent = range_input_parent.width();

  // Calculate width percentage of each li based on Parent width
  range_input_width_percent = range_width / range_width_parent * 100;
}

function setMinMaxAttr() {
  // Create empty variable as min
  let min = 0;
  // Create max variable based on total number of li elements in range
  let max = $('.range-label').length;

  // Set input attributes max / min respectively
  range_input.attr('max', max);
  range_input.attr('min', min);
}

setMinMaxAttr();
calculateWidth();

// Set widths of li elements to percentage of parent width
function setElementWidth() {
  let el = range_input_width_percent / range_labels.length;
  // Set width as %
  $(range_labels).css("width", el + "%");
}

setElementWidth();

CSS

.range {
  position: relative;
  width: 100%;
  height: 5px;
  padding-top: 40px;
}

.range input {
  width: 100%;
  position: absolute;
  top: 2px;
  height: 0;
  -webkit-appearance: none;
}

.range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: -8px 0 0;
  border-radius: 50%;
  background: #37adbf;
  cursor: pointer;
  border: 0 !important;
}

.range input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  margin: 0 0 0;
  border-radius: 50%;
  background: #37adbf;
  cursor: pointer;
  border: 0 !important;
}

.range input::-ms-thumb {
  width: 18px;
  height: 18px;
  margin: 0 0 0;
  border-radius: 50%;
  background: #37adbf;
  cursor: pointer;
  border: 0 !important;
}

.range input::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
}

.range input::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
}

.range input::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
}

.range input:focus {
  background: none;
  outline: none;
}

.range input::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.range-labels {
  margin-top: 20px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
}

.range-labels li {
  position: relative;
  text-align: left;
  color: #b2b2b2;
  font-size: 14px;
  cursor: pointer;
}

JS 小提琴 https://jsfiddle.net/nbinks1/jg4169om/

标签： htmlcsssliderrange