Как сделать так, чтобы каждая точка на ползунке [input type = "range"] соответствовала положению ползунка? - PullRequest
Новая
       14

Как сделать так, чтобы каждая точка на ползунке [input type = "range"] соответствовала положению ползунка?

1 голос
/ 13 февраля 2020

Аналогично Большой палец ввода диапазона смещается во времени

У меня есть диапазон ползунка, который будет использоваться для выбора точки. Каждая точка на ползунке соответствует значению этой точки. Атрибуты 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/

...