Как реализовать подобный нестандартный range slider?

Здравствуйте, подскажите как реализовать подобный range-slider?
Делал через svg в виде двух штук, первый серого цвета, второй градиентом через абсолютное позиционирование с нулевой шириной накладывал на первый, и по мере возрастания или убывания value через JS в стили второго прописывал ширину и он соответcтвенно равнялся value.
Однако мне кажется такое решение не очень хорошим, есть ли у вас идея как можно элегантно решить подобную задачу?