Как сделать background ползунка?

Question

[Mad Coder]

У меня есть кастомный ползунок. Который можно перетаскивать - сделано через жс. Трэк по которому бегает ползунок имеет background: linear-gradient(90deg, #027000 0.75%, #42A554 42.25%, #FEE400 57.75%, #F26C0A 68.25%, #960000 96.75%). Как при перемещении ползунка ему получать текущий цвет трэка. Картинка приложена:

Comments

[szQocks]

1- #027000 0.75%, #42A554 42.25%, #FEE400 57.75%, #F26C0A 68.25%, #960000 96.75% - эту шляпу, нужно где-то хранить - например в массиве
2 - тебе нужно знать ширину трека
3 - знать где сейчас в процентах находится ползунок на основе ширины трека
3 - и при каждом событии ползунка, ну то есть ползунок двигается - нужно сопоставлять проценты

например ползунок сейчас находится на 20% ширины трека, заходит в наш массив где хранятся цвета и их проценты, переворачиваем массив и ищем первый попавшийся элемент где процент элемента в массиве - меньше процента позиции ползунка, либо последний элемент - вот и наш цвет

[Mad Coder]

Спасибо за ответ, но я вроде самостоятельно решил эту проблему. В твоем случае будет только 5 цветов, а есть еще цвета перехода к примеру от желтого к зеленому и т.д. Проблема решается тем, что я устанавливаю background-size равный ширине трека. Потом при передвижении ползунка я высчитываю процент где он находится. И через css переменные вкидываю это процент в background-position ползунка. И тогда я охватываю всю цветовую гамму

[szQocks]

Mad Coder, ну да то что там градиент, это я не учёл, через background-position - решение огонь

[imko]

А если сделать большой фон с таким же градиентом а ползунка маской для этого фона?

[modelair]

Mad Coder, звучит отлично. положи теперь в ответ :)