дальномер с javascript

Question

Я хочу создать очень простой инструмент выбора диапазона, но у меня 3 проблемы 1. тег HTML диапазона работает только на Chrome и Safary. Как я могу создать тот, который работает в других браузерах?

1. Как сделать его вертикальным?

2. Как управлять самой кнопкой прокрутки? Я хочу изменить его изображение и изменить его размер в соответствии с прокруткой.

спасибо

Answer 1

Тэг диапазона - это html5 определенный элемент. Как вы знаете, html5 поддерживается не полностью во всех браузерах, поэтому на данный момент лучше использовать альтернативу, например jquery, которая является самым безопасным способом обеспечения совместимости с браузером.

Ваш первый вопрос для вертикального слайдера: http://jqueryui.com/demos/slider/#range-vertical

Что касается вашего второго вопроса, то лучше использовать пользовательский контроль. Используя ползунок диапазона jquery, вы можете подключиться к событиям ползунка и изменить свойство некоторого элемента в соответствии со значением. Посмотрите API для слайдера. Проверьте, как они это делают с изменением значения цвета. Вы можете сделать то же самое с изменением размера изображения, например. http://jqueryui.com/demos/slider/#colorpicker

Answer 2

JQuery UI имеет обширную библиотеку элементов формы, и я думаю, что они также обратно совместимы со старыми версиями.

Попробуйте этот URL: http://jqueryui.com/demos/slider/#range

Answer 3

В общем, вам лучше всего отказаться от поля формы <input type="range"...> и выбрать ползунок диапазона jQuery UI .