Значение ползунка
Добрый день.
Есть range slider с двумя ползунками для выбора диапазона, написанный на js и css, помогите, пожалуйста, с выводом значения в отдельных текстовых полях для каждого ползунка. http://codepen.io/imakhortykh/pen/PGENKL |
Igor710,
где элементы в которые нужен вывод значений? |
Igor710, ваш код только для Google Chrome
<!DOCTYPE html><html class=''> <head> <meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/imakhortykh/pen/PGENKL" /> <style class="cp-pen-styles">input[type=range]{ box-sizing:border-box; appearance:none;width:400px; margin:0; padding:0 2px;overflow:hidden; border:0; border-radius:10px; outline:0; background:linear-gradient(grey,grey) center no-repeat; background-size:100% 2px; pointer-events:none; } input[type=range]:active,input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-thumb{ height:28px; width:28px; border-radius:28px; background-color:#fff; position:relative; margin:5px 0;cursor:pointer; appearance:none;pointer-events:all; box-shadow:0 1px 4px .5px rgba(0,0,0,.25); z-index:99; } input[type=range]::-webkit-slider-thumb::before{ content:' '; display:block; position:absolute; top:13px;left:100%; width:2000px;height:2px; } .multi-range{ position:relative; height:50px; } .multi-range input[type=range]{ position:absolute; } .multi-range input[type=range]:nth-child(1)::-webkit-slider-thumb::before{ background-color:red; } .multi-range input[type=range]:nth-child(2){ background:0 0; } .multi-range input[type=range]:nth-child(2)::-webkit-slider-thumb::before{ background-color:grey; }</style></head><body> <span class="multi-range"> <input type="range" min="0" max="100000" value="5" id="lower" > <input type="range" min="0" max="100000" value="95000" id="upper" > </span><br><br> <br><br><br> <br><br><br><br> <input id="one"><input id="two"> <script> var lowerSlider = document.querySelector('#lower'), upperSlider = document.querySelector('#upper'), lowerVal = parseInt(lowerSlider.value); upperVal = parseInt(upperSlider.value); upperSlider.oninput = function () { lowerVal = parseInt(lowerSlider.value); upperVal = parseInt(upperSlider.value); if (upperVal < lowerVal + 4) { lowerSlider.value = upperVal - 4; if (lowerVal == lowerSlider.min) { upperSlider.value = 4; } } document.querySelector('#two').value=this.value }; lowerSlider.oninput = function () { lowerVal = parseInt(lowerSlider.value); upperVal = parseInt(upperSlider.value); if (lowerVal > upperVal - 4) { upperSlider.value = lowerVal + 4; if (upperVal == upperSlider.max) { lowerSlider.value = parseInt(upperSlider.max) - 4; } } document.querySelector('#one').value=this.value }; </script> </body></html> |
Да, я знаю.
Спасибо вам огромное, очень помогли. |
Часовой пояс GMT +3, время: 21:42. |