Как сделать калькулятор с ползунками?

Question

[Василий Хрягин]

Подскажите может какой нибудь плагин для реализации подобного пожалуйста

Comments

[Ankhena]

Стилизуйте radio.
Цвет полоски меняла градиентом.

Answer 1

[Stalker_RED]

Для изменения внешнего вида есть куча способов стилизировать input range (на js или css).

А дальше слушаете на форме событие input или change и применяете вашу формулу расчета.

Comments

[forspamonly2]

нормального способа оформлять range через css на данный момент не существует. мало того, что у каждого браузера свои нестандартные и несовместимые селекторы, так ещё и в вебкитах тупо нету отдельного селектора для закрашенной части рельса слева от позунка. народ для этой цели извращается с тенями, но это более или менее сносно работает только в случаях когда ширина ползунка и рельса совпадает. дополнительно осложняется это всё тем, что отдельные части рейнджа - это и так псевдоэлементы, и у них нету никаких ::before и ::after.
сейчас задача сделать такой контрол, как на этой картинке, на чистом цсс - это уровень тестового задания сеньёр веб-технологу. и в прод это выпускать будет страшно, потому что хрупко и при обновлении браузера может сломаться.

Answer 2

[Артур Арутюнян]

Чувак скажи что тебе конкретно надо сделать и я тебе скину готовый код, для того чтобы кастомизировать это, не нужны плагины черт бы тебя побрал, там 2 строчки кода, или даже одна

Comments

[Василий Хрягин]

формулу заказчик пока не скинул, у меня только дизайн. В минифицированной версии jquery тоже одна строчка)

[Артур Арутюнян]

Ну например скопируй отсюда:
https://zaandem.com/investment

Там еще прикольная анимация чисел, это я реализовывал пару лет назад

если скинешь макет или ссылку на макет в фигме я тебе сделаю итак

[Василий Хрягин]

благодарствую