Элемент прикрепленный к бегунку

168
21 ноября 2018, 18:20

Есть бегунок. Нужно, чтобы его значение выводилось в блоке над ним, и этот блок следовал за бегунком, как на картинке. Подскажите, как такое реализовать?

Answer 1

Шрифты уже не стал подбирать))...

function fRangeChange() { 
  let oRangeInput = document.querySelector('input[type=\'range\']'); 
  let oRangeLabel = document.querySelector('.range_label'); 
  oRangeLabel.innerText = '$' + oRangeInput.value; 
  let nLabelWidth = parseFloat(window.getComputedStyle(oRangeLabel).width); 
  oRangeLabel.style.left = parseInt(oRangeInput.value / 350 - nLabelWidth / 2 - 6) + 'px'; 
}
.range_wrap { 
  color: #c7c5d9; 
  display: flex; 
  flex-flow: wrap; 
  font: 13px 'Trebuchet MS'; 
  justify-content: space-between; 
  margin: 100px auto; 
  position: relative; 
  width: 300px; 
} 
 
input[type="range"] { 
  display: block; 
  height: 15px; 
  outline: none; 
  width: 300px; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none; 
} 
 
input[type="range"]::-webkit-slider-thumb { 
  background: #ffffff; 
  border: 7px solid #93bb58; 
  border-radius: 50%; 
  box-shadow: 0px 0px 3px 0px #93bb58; 
  height: 10px; 
  margin-top: -6px; 
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 1s; 
  width: 10px; 
  -webkit-appearance: none; 
} 
 
.range_wrap:hover>input[type="range"]::-webkit-slider-thumb { 
  border: 7px solid #93bb58; 
  border-radius: 50%; 
  box-shadow: 0px 0px 17px 2px #93bb58; 
  height: 20px; 
  margin-top: -9px; 
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 
  width: 20px; 
} 
 
input[type="range"]::-webkit-slider-runnable-track { 
  background: linear-gradient(to top, #93bb58 0%, #93bb58 100%); 
  height: 2px; 
} 
 
.range_label { 
  background: #ffffff; 
  border: 0px solid #e9e8eb; 
  border-radius: 4px; 
  bottom: 40px; 
  color: #1e1b67; 
  font: bold 16px 'Trebuchet MS'; 
  left: -24px; 
  padding: 4px 10px; 
  position: absolute; 
  transition: border 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 
} 
 
.range_wrap:hover>.range_label { 
  border: 2px solid #e9e8eb; 
  transition: border 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}
<div class="range_wrap"> 
  <input type="range" class="volume" value="0" OnInput="fRangeChange();" min="1000" max="100000" step="1000"> 
  <div>$1000</div> 
  <span class="range_label">$1000</span> 
  <div>$100000</div> 
</div>

READ ALSO
Другое действие по повторному клику на кнопке

Другое действие по повторному клику на кнопке

Есть форма поискаПо нажатию на кнопку, появляется input с возможностью ввода поискового запроса

138
Что значит запись вида const { name } = value?

Что значит запись вида const { name } = value?

Увидел в описании использования одного из npm-пакетов запись вида const { NAME } = valueВ JavaScript не профи, так что никак не могу понять/найти зачем эти...

145
Подмена src в iframe для Ion Range Slider и RsForm

Подмена src в iframe для Ion Range Slider и RsForm

Есть калькулятор на RSForm и JSРаньше, когда изменения происходили просто по onchange или oninput какого-либо radio/checkbox, все работало приемлемо

204