Как сделать ползунок в css

Для создания ползунка в CSS можно использовать псевдоэлемент ::before или ::after, а также свойства width, height, background-color и border-radius.

Пример кода для создания простого горизонтального ползунка:

.slider {
  width: 200px;
  height: 10px;
  border-radius: 5px;
  background-color: #ccc;
  position: relative;
}

.slider::before {
  content: "";
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #333;
  position: absolute;
  top: -5px;
  left: 0;
  transition: left 0.2s ease-in-out;
}

/* При наведении мыши на .slider::before меняем цвет фона */
.slider:hover::before {
  background-color: #555;
}

/* При перетаскивании (.slider:active .slider::before) меняем положение .slider::before */
.slider:active .slider::before {
  pointer-events: none;
  left: calc(100% - 20px);
}

Здесь мы задаем ширину, высоту, радиус границы и фоновый цвет для элемента .slider. Затем используем псевдоэлемент ::before, чтобы создать элемент, который будет использоваться как ползунок. Устанавливаем его высоту, ширину, радиус границы и фоновый цвет, а также позиционируем его по верхней границе элемента .slider.

Также мы добавляем анимацию для плавного перемещения ползунка при нажатии на него (transition) и изменяем цвет фона при наведении на него курсора (:hover). Для изменения положения ползунка при перетаскивании мы используем псевдокласс :active вместе с CSS-селектором .slider:active .slider::before.

Этот код создаст простой горизонтальный ползунок, который можно дополнить другими свойствами стиля для достижения нужного вида и поведения.