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

Для создания ползунка в HTML и CSS следуйте этим шагам:

Создайте HTML-элемент для ползунка, например:

<input type="range" min="0" max="100" value="50" class="slider">

input типа range создает ползунок с определенными атрибутами min (минимальное значение), max (максимальное значение) и value (начальное значение).

Определите стили для вашего ползунка в CSS:

.slider {
  -webkit-appearance: none; /* убираем стандартный вид ползунка в браузерах Webkit */
  width: 100%; /* определяем ширину */
  height: 5px; /* определяем высоту */
  background-color: grey; /* задаем цвет фона */
  outline: none; /* убираем контур фокуса */
  opacity: 0.7; /* устанавливаем прозрачность для неперемещаемой части */
  transition: opacity .2s; /* добавляем анимацию перехода */
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* убираем стандартный вид ползунка в браузерах Webkit */
  appearance: none;
  width: 20px; /* задаем ширину */
  height: 20px; /* задаем высоту */
  background-color: #4CAF50; /* задаем цвет кнопки */
  cursor: pointer; /* добавляем стиль указателя */
  border-radius: 50%; /* задаем радиус границы для круглой формы */
}

.slider:hover::-webkit-slider-thumb {
  opacity: 1; /* устанавливаем непрозрачность при наведении на ползунок */
}

Здесь мы используем псевдоэлемент ::-webkit-slider-thumb, чтобы стилизовать кнопку ползунка. Мы определяем ее размеры, цвет фона, стиль указателя и радиус границы для круглой формы.

Мы также устанавливаем opacity: 0.7 для фона ползунка, чтобы при наведении курсора на него, его неперемещаемая часть выглядела более транспарентной.

Если вы хотите добавить линии на фоне вашего ползунка, вы можете использовать псевдоэлементы ::-moz-range-track и ::-webkit-slider-runnable-track, как показано ниже в CSS:

.slider::-moz-range-track {
  background-color: grey; /* задаем цвет торца полосы фона */
  border-radius: 25px; /* задаем закругленные углы */
  height: 5px; /* задаем высоту */
}

.slider::-webkit-slider-runnable-track {
  background-color: grey; /* задаем цвет торца полосы фона */
  border-radius: 25px; /* задаем закругленные углы */
  height: 5px; /* задаем высоту */
}

Эти псевдоэлементы могут быть использованы для добавления линий на фоне вашего ползунка.

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