Как стилизировать полоску до ползунка?

Question

[mijanj]

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


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

Даже в стандартном range, есть эта полоса:

Comments

[andand44]

Полоска до ползунка делается с помощью box-shadow, которое гарантированно превышает размеры этого input и добавлением overflow: hidden; input, но тогда обрежется и сам ползунок, который выходит за пределы input.

input[type="range"] {
  width: 1000px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}
input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 3px;
  background-color: #f92b2b;
  border-radius: 10px;
  -webkit-appearance: none;
  margin-top: -10px;
  cursor: pointer;
  box-shadow: -1000px 0px 1px 1000px #f92b2b;
}

[mijanj]

andand44, Благодарю, но возможно ли как-то сделать так, чтобы ползунок оставался не обрезанным? Ведь как-то же стоит в стандартном инпуте ползунок круглый

[andand44]

Стандартный это системный элемент. Он не стилизуется.
Можно сделать полосу высотой с ползунок, а на фоне сделать изображение линии шириной как в макете. Визуально будет выглядеть, как в макете. И пробовать совмещать это все с box-shadow. Нужно экспериментировать.

[Ankhena]

градиентом

Answer 1

[Сергей Кутузов]

Кое что по стилизации ползунка https://starper55plys.ru/css/polzunok-html/

Comments

[mijanj]

видел, но это не оно