Как задать двойную шкалу у range slider?

Question

[Inna]

Нужно сделать вот такой слайдер:



Проблема в том, что слайдеру нужно задать две шкалы - в верхней количество (50 - 20 000), в нижней проценты (от 0 до -30%). Ползунок так же должен динамически подхватывать два текущих значения - верхнее в штуках и нижнее в процентах.
Все текущие решения, которые я находила определяют только одну шкалу. Даже если задать max и min значения промежутка в штуках, а массив values (значений нижней шкалы) в процентах - получим нижнюю шкалу в процентах, крайние значения в процентах и ползунок, отражающий только их:


Как задать дополнительную шкалу для слайдера и заставить ползунок отображать оба значения?

P.S.: использую Ion.RangeSlider (ionden.com/a/plugins/ion.rangeslider/index.html), но это не принципиально, рассматривала и другие варианты тоже.
P.P.S.: стили потом подгоню под нужные, на них можно не обращать внимания

Answer 1

[Олег]

Мое решение ;) и для вас верное направление

ЗЫ. Люблю хорошее пиво - за которое подгоню од ваши нужды :)

Comments

[Inna]

спасибо, примерно то, что нужно

Answer 2

[Максим]

https://freelenskygroup.github.io/ вот так
с ответом помогли : https://ru.stackoverflow.com/a/967529/330688