Как вывести результат input type="range"?

Question

[Денис]

Не могу найти и понять как вывести результат из input type="range", чтобы интерактивно сбоку показывало выбранное значение. Джавасрипт не знаю к сожалению. Подскажите ресурсы где почитать или у вас есть уже готовое решение? Заранее спасибо!

Answer 1

[afishr]

Тут только на jQuery
CodePen

Comments

[Денис]

Спасибо! Помогли!)

[afishr]

Денис: :)

[it_pear_yurec]

А как сделать чтобы и на мобилках работало ??

Answer 2

[wanderbon]

<form onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
   <input name="flevel" id="flying" type="range" min="100" max="10000" value="100" step="10"> 
   <output for="flying" name="level">100</output>
</form>

Answer 3

[lega]

jsfiddle.net/lega911/pydjasrm

Comments

[Денис]

а как мне это вставить в код чтобы работало? Нужно вставлять ссылки на какие-то подключаемые источники?

[Дима Паутов]

Очень смешно! Вы бы еще ангуляр туда засунули!!

[lega]

Денис: Вставить этот HTML и подключить Angular Light: angularlight.org/bin/alight_0.12.last.min.js

[Денис]

lega: не хочет работать(

[lega]

Денис: Покажите что вы сделали

[Денис]

lega: вставил ресурс как обычно js в html вставляют
и скопировал ваш код в нужную мне часть

[lega]

Денис: Если не работает, значит что-то не так сделали, либо либу не загрузили, либо html испорчен/с опечатками/не полный на момент загрузки страницы. т.к. пример 100% рабочий.
Хотя вам это уже не важно.

Answer 4

[Школьник.]

var result, elements = document.getElementsByTagName('*');
for(var i = 0; i < elements.length; i++) {
  if(elements[i].getAttribute('type') == 'range')
    result = elements[i].value;
};
alert(result);