Как сделать изогнутый слайдер?

Question

[Денис Букреев]

Такие дела.
Накидал макет, ибо NDA:


Соль вот в чем:
Продукты имеют градиентный размер (по аналогии с доком в macOS), соответственно выделенный - самый большой, чем дальше от него - тем меньше размер.
Выделять можно кликом по продукту, стрелко-кнопками на концах карусели и слайдером в левом нижнем углу.

И вот этот слайдер создает больше всего вопросов.
Как сделать его таким изогнутым, чтобы ползунок шел по кривой?
И как его соединить с каруселью - какие-то координаты отслеживать? Вообще не представляю.

Answer 1

[Максим Тимофеев]

js + svg
Вот простой пример: ruseller.com/lessons.php?rub=2&id=2783 так как не думаю что есть изогнутые.

Comments

[Денис Букреев]

не понял связи между моей задачей и примером

[Максим Тимофеев]

Денис Букреев: Это пример слайдера на svg. Что бы решить Вашу задачу, его естественно надо переписать серьезно. Но по сути все тоже, только по кривой. Но благо в svg есть path через который можно задать практически любую траекторию.

Answer 2

[whoisthere]

Копайте в этом направлении.
Path Animation

Answer 3

[Alexej Simakov]

Думаю ближе всего по принципу действия, элемент управления типа "регулятор громкости".
KnobKnob или JogDial

хотя пожалуй ближе к такому
jQuery Knob
только двигаться он будет у вас только в пределах 90 градусов.

...искал по запросам "Volume Control js" и "Knob control js"