Как сделать input range с точками и положить value вовнутрь ползунка?

Question

мой код сейчас:

html

   <div class="range">
        <input type="range" min="1" max="7" steps="1" value="1">
      </div>
      <ul class="range-labels">
        <li class="active selected">Today</li>
        <li>2 days</li>
        <li>3 days</li>
        <li>4 days</li>
        <li>5 days</li>
        <li>6 days</li>
        <li>7 days</li>
      </ul>

JS

  var sheet = document.createElement('style'),  
  $rangeInput = $('.range input'),
  prefs = ['webkit-slider-runnable-track', 'moz-range-track', 'ms-track'];

document.body.appendChild(sheet);

var getTrackStyle = function (el) {  
  var curVal = el.value,
      val = (curVal - 1) * 16.666666667,
      style = '';
  

  $('.range-labels li').removeClass('active selected');
  
  var curLabel = $('.range-labels').find('li:nth-child(' + curVal + ')');
  
  curLabel.addClass('active selected');
  curLabel.prevAll().addClass('selected');
  

  for (var i = 0; i < prefs.length; i++) {
    style += '.range {background: linear-gradient(to right, #37adbf 0%, #37adbf ' + val + '%, #fff ' + val + '%, #fff 100%)}';
    style += '.range input::-' + prefs[i] + '{background: linear-gradient(to right, #37adbf 0%, #37adbf ' + val + '%, #b2b2b2 ' + val + '%, #b2b2b2 100%)}';
  }

  return style;
}

$rangeInput.on('input', function () {
  sheet.textContent = getTrackStyle(this);
});


$('.range-labels li').on('click', function () {
  var index = $(this).index();
  
  $rangeInput.val(index + 1).trigger('input');
  
});

Answer 1

В виду отсутствия внятной формулировки и полного несовпадения скриншота с приложенным кодом в вопросе, получилось следующее:

let oRangeWrap = document.querySelector('.range-wrap');
let oRangeText = oRangeWrap.querySelector('.range-text');
let aRangeVals = ['Today', '2 days', '3 days', '4 days', '5 days', '6 days', '7 days'];
document.querySelector('[type="range"]').addEventListener('input', function() {
  let nVal = this.value - 1;
  oRangeText.textContent = aRangeVals[nVal];
  oRangeWrap.style.setProperty('--left', `${(100 / 6) * nVal}%`);
  oRangeText.style.transform = `translatex(-${(100 / 6) * nVal}%)`;
});

.range-wrap {
  --left: 0%;
  position: relative; display: block;
  height: 35px; max-width: 100%;
  overflow: hidden; resize: horizontal; /* Для проверки адаптивности */
}

.range-wrap::before,
.range-wrap::after {
  content: ''; will-change: padding-left, padding-right;
  position: absolute; z-index: -1; top: 0; left: 0;
  display: block; height: 35px; width: 100%;
  box-sizing: border-box;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 5px 50%;
  background-repeat: no-repeat; background-clip: content-box;
  transition: 0.3s linear; pointer-events: none;
}
.range-wrap::before {
  padding-left: var(--left, 0%);
  background-image: radial-gradient( circle at 8px 50%, #fff 5px, #999 6px, #999 7px, #fff0 8px), radial-gradient( circle at calc(16.66666666666667% + (16px / 3)) 50%, #fff 5px, #999 6px, #999 7px, #fff0 8px), radial-gradient( circle at calc(33.33333333333333% + (16px / 6)) 50%, #fff 5px, #999 6px, #999 7px, #fff0 8px), radial-gradient( circle at calc(50% - 0px) 50%, #fff 5px, #999 6px, #999 7px, #fff0 8px), radial-gradient( circle at calc(66.66666666666667% - (16px / 6)) 50%, #fff 5px, #999 6px, #999 7px, #fff0 8px), radial-gradient( circle at calc(83.33333333333333% - (16px / 3)) 50%, #fff 5px, #999 6px, #999 7px, #fff0 8px), radial-gradient( circle at calc(100% - 8px) 50%, #fff 5px, #999 6px, #999 7px, #fff0 8px), linear-gradient(#999, #999);
  background-size: auto, auto, auto, auto, auto, auto, auto, calc(100% - 10px) 2px;
}
.range-wrap::after {
  padding-right: calc(100% - var(--left, 0%));
  background-image: radial-gradient( circle at 8px 50%, #40c34e 5px, #fff 6px, #fff 7px, #fff0 8px), radial-gradient( circle at calc(16.66666666666667% + (16px / 3)) 50%, #40c34e 5px, #fff 6px, #fff 7px, #fff0 8px), radial-gradient( circle at calc(33.33333333333333% + (16px / 6)) 50%, #40c34e 5px, #fff 6px, #fff 7px, #fff0 8px), radial-gradient( circle at calc(50% - 0px) 50%, #40c34e 5px, #fff 6px, #fff 7px, #fff0 8px), radial-gradient( circle at calc(66.66666666666667% - (16px / 6)) 50%, #40c34e 5px, #fff 6px, #fff 7px, #fff0 8px), radial-gradient( circle at calc(83.33333333333333% - (16px / 3)) 50%, #40c34e 5px, #fff 6px, #fff 7px, #fff0 8px), radial-gradient( circle at calc(100% - 8px) 50%, #40c34e 5px, #fff 6px, #fff 7px, #fff0 8px), linear-gradient(#40c34e, #40c34e);
  background-size: auto, auto, auto, auto, auto, auto, auto, calc(100% - 10px) 4px;
}

[type="range"] {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  box-sizing: border-box; opacity: 0;
}

.range-text {
  will-change: left, transform;
  position: absolute; top: 0; left: var(--left, 0%);
  display: inline-block; height: 100%;
  padding: 0 0.5em; border-radius: 12px;
  line-height: 35px; white-space: nowrap;
  background-color: #fff; box-shadow: inset 0 0 1px 3px #40c34e;
  transition: 0.3s linear; pointer-events: none;
}

<label class="range-wrap">
  <input type="range" min="1" max="7" steps="1" value="1">
  <span class="range-text">Today</span>
</label>

БЛОГ НА HUSL

Как сделать input range с точками и положить value вовнутрь ползунка?

Ответы (1 шт):