phpjsJqueryhtmlcssblog

Получение данных из type range javascript

Нам нужно получить данные из type range в javascript. Для этого нам потребуется:
<input type="range">

Получение данных из type range javascript

1. Получение данный из range в javascript
2. Скрипт в сборе получение данный из range в javascript
3. Скачать можно здесь

Скопировать ссылку



Получение данный из range в javascript

Для того, чтобы собрать наш показательный стенд, нам понадобится:

Тег - input

С type="range"

Добавим id, чтобы можно было обратиться к тегу.

Поставим value на отметку 50 - половину от максимального, чтобы ползунок стоял ровно на половине.

Добавим min="0" - минимальное значение - позиция слева.

max="100" - максимальное значение позиция справа.

step="1" - шаг при движении

Добавим oninput - с функцией внутри.

oninput="fun()"

Основной ползунок собрали!

<input type="range" min="0" max="100" step="1" value="50" id="id_range" oninput="fun()">

Соберем куда будем передавать полученные данные :

Это будет div

Добавим id - send_result.

Внутрь помести среднее значение 50.

Результат:
<div id="send_result">50</div>
javascript

Соберем код для сбора и передачи данных

Куда отправляем - send_result.innerHTML - innerHTML

Что отправляем - id_range.value - value в js

Соберем вместе:

<script>

function fun() {

send_result.innerHTML=id_range.value;

}

</script>

Скопировать ссылку



Скрипт в сборе получение данный из range в javascript

Соберем весь код получение данный из range в javascript вместе!


Заметьте - казалось бы, какой простой код, и сколько пунктов нам нужно было пройти, чтобы собрать его!

Html :

<input type="range" min="0" max="100" step="1" value="50" id="id_range" oninput="fun()">

<div id="send_result">50</div>

* javascript

<script>

function fun() {

send_result.innerHTML=id_range.value;

}

</script>

Результат Чтобы протестировать работу - отправки и получения данных из range в javascript - перетащите ползунок в какое-то новое положение и вы увидите, как изменяется показания снятые из input range

50

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---