Есть бегунок. Нужно, чтобы его значение выводилось в блоке над ним, и этот блок следовал за бегунком, как на картинке. Подскажите, как такое реализовать?
Шрифты уже не стал подбирать))...
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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть форма поискаПо нажатию на кнопку, появляется input с возможностью ввода поискового запроса
Увидел в описании использования одного из npm-пакетов запись вида const { NAME } = valueВ JavaScript не профи, так что никак не могу понять/найти зачем эти...
Есть калькулятор на RSForm и JSРаньше, когда изменения происходили просто по onchange или oninput какого-либо radio/checkbox, все работало приемлемо