Стилизация HTML5 input[type=range]

[p0rsche 0]

Доброго времени суток! Необходимо стилизовать range input (тот самый, что в html5 появился). Нужно сделать так (все размеры как на картинке):

Необходимые условия:

- должно быть сделано через элемент input range

- IE9 (sorry)

- без лишней графики - насечки слайдера через псевдоэлементы :after / :before

- граничные значения ролика прокрутки должны как бы выходить за полоску слайдера, как на рисунке. Стандартно ролик доходит до верхней границы.

 

Слайдер уже есть, без насечек и ролик не вылазит за границы. Реализован через обычный элемент с трансформацией на 90 град. (не используем data- атрибуты). Хочется сделать, как на картинке, желательно без использования data-атрибутов, и кроссбраузерно в современных браузерах.

 

Предлагайте цены и варианты. icq: 196755578,  skype: p0rschevip

 

Спасибо.

[Yazon_Nile 61]

ие9 не поддерживает input[type=range]

[p0rsche 0]

ие9 не поддерживает input[type=range]

Для ИЕ9 у нас полифил rangeslider.js, с описания можно убрать это условие.

Изменено 22 апреля, 2014 пользователем p0rsche

[p0rsche 0]

Все заняты? Может, я чего-то не то написал? Или слишком сложно?

[Yazon_Nile 61]

Я бы сказал - геморно

Обьясню со своей колокольни.

Кроссбраузерно input:range не сделать, тк ещё просто недостаточно инструментов для его стилизации.

Соотв, нужно делать через js. О чем в условии не сказано ни слова.

[p0rsche 0]

Я бы сказал - геморно

Обьясню со своей колокольни.

Кроссбраузерно input:range не сделать, тк ещё просто недостаточно инструментов для его стилизации.

Соотв, нужно делать через js. О чем в условии не сказано ни слова.

Ну, если здесь все привыкли за полчаса верстать целую страницу, то да, наверное геморно. Хотя никто не спросил и не предложил, сколько будет стоить сия работа. Готов заплатить хорошую цену за качественную реализацию, которая будет сравнима с ценой верстки целого сайта. Да, инструментов для стилизации мало (можно даже сказать - нет), это будет творческая рбаота для тех, кто не любит ходить проторенными тропами.

 

P.S. А что там предлагаете делать на JS?

P.P.S. Дополнительный бонус тем, кто знаком с БЭМ и SCSS.

[Struggle 21]

http://pixelkit.com/free-ui-kits/sweet-candy/index.html

 

оно ?

[p0rsche 0]

http://pixelkit.com/free-ui-kits/sweet-candy/index.html

 

оно ?

Нет, не совсем. Вертикальные Scroll Bars, что там представлены,обычные. Горизонтальный Progress Bar вроде похож, но там количество JS кода и HTML зашкаливает.

[ryter 26]

 

http://pixelkit.com/free-ui-kits/sweet-candy/index.html

 

оно ?

Нет, не совсем. Вертикальные Scroll Bars, что там представлены,обычные. Горизонтальный Progress Bar вроде похож, но там количество JS кода и HTML зашкаливает.

 

http://yuilibrary.com/yui/docs/slider/slider-basic.html тут хорошая реализация но опять же если вы привязаны к жиквери то это не подойдет 

[Yazon_Nile 61]

http://jqueryui.com/slider/#range-vertical

[p0rsche 0]

Таки Ви упорно подсовываете мне JS-реализации, товагисчи

[p0rsche 0]

Вопсчем, придется делать самому. Прошу модератора закрыть тему.

[Yazon_Nile 61]

 

 

Таки Ви упорно подсовываете мне JS-реализации, товагисчи

Кроссбраузерно input:range не сделать, тк ещё просто недостаточно инструментов для его стилизации.

Соотв, нужно делать через js. О чем в условии не сказано ни слова.

Как сам с собой пообщался)

[ryter 26]

http://jsfiddle.net/ryter/4CM8u/2/ не совсем кросбраузерно но хоть что то 

Изменено 24 апреля, 2014 пользователем ryter