Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Превратить input type button в ползунок (https://javascript.ru/forum/dom-window/44096-prevratit-input-type-button-v-polzunok.html)

MrNSky 06.01.2014 13:44

Превратить input type button в ползунок
 
Здравствуйте, у меня вот такая проблема. Я нашел очень неплохой плеер (главное простой) ссылка и примеил его на своем сайте. Там управление плеером через яваскрипт (onclick события). Так вот неустраивает лишь один минус там уровни громкости описаны в виде кнопок input, я вот хочу чтобы это был ползунок. Но за неимением знаний по js незнаю как это сделать. Я ваще в js ноль. Помогите пожалуйста справится с задачей. У меня сайт сам на Jquery в основном работает чтоб и конфликтов небыло бы. Заране спасибо всем кто ответит. Жду.

danik.js 06.01.2014 16:53

Есть замечательный html-элемент:
<input type="range" min="0" max="100" value="100" id="volume"  oninput="this.labels[0].textContent = this.value" onchange="this.oninput()" />
<label for="volume">100</label>


Однако он из HTML5 и не поддерживается старыми браузерами (плюс со стилизацией проблема). Если это проблема, то можно подключить например такую штуку: http://refreshless.com/nouislider/ или jquery.ui

рони 06.01.2014 21:24

где найти информацию по
Цитата:

Сообщение от danik.js
labels

?

danik.js 06.01.2014 23:31

whatwg.org - там всё должно быть. Mozilla Developer Network - тоже полезный ресурс. Ищи сам в общем.

MrNSky 06.01.2014 23:51

Цитата:

Сообщение от danik.js (Сообщение 290759)
Есть замечательный html-элемент:
<input type="range" min="0" max="100" value="100" id="volume"  oninput="this.labels[0].textContent = this.value" onchange="this.oninput()" />
<label for="volume">100</label>


Однако он из HTML5 и не поддерживается старыми браузерами (плюс со стилизацией проблема). Если это проблема, то можно подключить например такую штуку: http://refreshless.com/nouislider/ или jquery.ui

Тык я не пойму где там применить onclick от плеера
onclick="uppodSend('player','v50')" и как

<input type="range" min="0" max="100" value="100" id="volume"  oninput="this.labels[0].textContent = this.value" onchange="this.oninput()" onclick="uppodSend('player','v100')" />
<label for="volume">100</label>
Так?

danik.js 06.01.2014 23:54

Дык не по клику должна громкость меняться а по изменению значения (onchange). Но в большинстве браузеров onchange событие происходит только когда отпускаешь ползунок. Зато срабатывает oninput. Так что вешать надо на onchange , а на oninput вызывать вручную через вызов this.onchange(). Ну или наоборот (как в примере у меня).

MrNSky 06.01.2014 23:58

то что в онклике было нужно в один их этих параметров засунуть?

рони 07.01.2014 00:07

danik.js,
вы то сами как узнали что есть this.labels? или это только для Google Chrome

danik.js 07.01.2014 06:48

рони, ты прав. Это HTML5 фича, реализована только в хроме и старой опере.
Спецификация http://www.whatwg.org/specs/web-apps...dom-lfe-labels

Баг на багтреккере файрфокса: https://bugzilla.mozilla.org/show_bug.cgi?id=556743

danik.js 07.01.2014 06:55

Цитата:

Сообщение от рони
вы то сами как узнали что есть this.labels?

В отладчике увидел.


Часовой пояс GMT +3, время: 21:39.