Как сделать range-slider с диаграммой в javascript?

Question

[Можно просто Евгений]

Нужно сделать приблизительно как тут ( диаграма + range-slider) :


Получилось пока что так:


Для range-slider использую noUiSlider , а вот для диаграммы не как не могу подобрать так что бы работала в паре , при этом то что не в диапазоне сделалось "disabled" как на первой картинке.

Help pls ..

Answer 1

[profesor08]

Расположи элементы диаграммы. Зная их количество, ширину и ширину контейнера. Подсчитай основываясь на позиции точек, какие закрашивать, какие нет. Например подели ширину контейнера на количество полосок, так ты получишь расстояние в пикселях, которое нужно протащить точку, чтоб закрасилась полоска. Поделив пройденное точкой расстояние на ширину полоски, получишь количество полосок которое надо закрасить.

Answer 2

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

взять js библиотеку, которая строит графики
получить json данные
построить график
менять заливку используя api выбранной библиотеки