Не получается поставить рядом два вертикальных ползунка
Вложений: 1
Всем привет!
Что в код нужно добавить? Заранее спасибо.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type="range"] {
-webkit-appearance: slider-vertical;
}
</style>
</head>
<body>
<h1>Custom Range Slider</h1>
<p>Drag the slider to display the current value.</p>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange2">
<p>Value: <span id="demo2"></span></p>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value
}
var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");
output.innerHTML = slider2.value;
slider2.oninput = function() {
output2.innerHTML = this.value;
}
</script>
</body>
</html>
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type="range"] {
-webkit-appearance: slider-vertical;
}
.cont {
display:flex;
}
</style>
</head>
<body>
<h1>Custom Range Slider</h1>
<p>Drag the slider to display the current value.</p>
<div class="cont">
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange2">
<p>Value: <span id="demo2"></span></p>
</div>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value
}
var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");
output.innerHTML = slider2.value;
slider2.oninput = function() {
output2.innerHTML = this.value;
}
</script>
</body>
</html>
|
О почти то что надо! А можно их плотно друг другу буквально на расстоянии пальца? А то я попробовал ещё четыре штуки добавить и у меня на экран не влазит.
|
Меняй ширину дивов и инпутов.
Играйся со свойствами flex https://html5book.ru/css3-flexbox/
<style>
input[type="range"] {
-webkit-appearance: slider-vertical;
width: 30px;
}
.cont {
display:flex;
}
.slidecontainer {
margin: 0px 10px;
}
</style>
|
Большое спасибо, то что надо !
|
| Часовой пояс GMT +3, время: 13:36. |