Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.10.2022, 13:28
Аватар для selevo
Кандидат Javascript-наук
Отправить личное сообщение для selevo Посмотреть профиль Найти все сообщения от selevo
 
Регистрация: 13.03.2013
Сообщений: 131

Не получается поставить рядом два вертикальных ползунка
Всем привет!
Что в код нужно добавить?
Заранее спасибо.

<!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>
Изображения:
Тип файла: jpg Screenshot_20221029_132900_com.teejay.trebedit.jpg (89.2 Кб, 3 просмотров)

Последний раз редактировалось selevo, 29.10.2022 в 13:35.
Ответить с цитированием
  #2 (permalink)  
Старый 29.10.2022, 14:15
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,703

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 29.10.2022, 18:59
Аватар для selevo
Кандидат Javascript-наук
Отправить личное сообщение для selevo Посмотреть профиль Найти все сообщения от selevo
 
Регистрация: 13.03.2013
Сообщений: 131

О почти то что надо! А можно их плотно друг другу буквально на расстоянии пальца? А то я попробовал ещё четыре штуки добавить и у меня на экран не влазит.
Ответить с цитированием
  #4 (permalink)  
Старый 29.10.2022, 19:33
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,703

Меняй ширину дивов и инпутов.
Играйся со свойствами flex
https://html5book.ru/css3-flexbox/

<style>
input[type="range"] {
  -webkit-appearance: slider-vertical;
  width: 30px;
}
 
.cont {
    display:flex;
}

.slidecontainer {
    margin: 0px 10px;
}
</style>

Последний раз редактировалось voraa, 29.10.2022 в 19:55.
Ответить с цитированием
  #5 (permalink)  
Старый 29.10.2022, 21:06
Аватар для selevo
Кандидат Javascript-наук
Отправить личное сообщение для selevo Посмотреть профиль Найти все сообщения от selevo
 
Регистрация: 13.03.2013
Сообщений: 131

Большое спасибо, то что надо !
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск