Как сделать ползунок (range)

Короткий ответ

Поле type="range" рисует ползунок. Границы задают min и max, шаг — step:

<label>
  Volume
  <input type="range" min="0" max="100" step="5" value="40">
</label>

Показать значение

Сам ползунок число не показывает. Выведите его в <output> — понадобится одна строка JavaScript:

<label>
  Price up to $<output id="price">50</output>
  <input type="range" min="10" max="200" step="10" value="50"
         oninput="price.value = this.value" style="display: block; width: 240px;">
</label>

Цвет и вид

Цвет заполненной части и бегунка меняет accent-color:

<input type="range" style="accent-color: seagreen; width: 240px;">

Для полностью своего вида задают appearance: none и оформляют дорожку и бегунок псевдоэлементами ::-webkit-slider-thumb и ::-moz-range-thumb. Их пишут отдельными правилами для разных браузеров, поэтому начинать стоит с accent-color — часто его достаточно.

Частая ошибка

Ползунком предлагают выбрать точное значение из большого диапазона — например, год рождения от 1900 до 2025. Попасть в нужное число пальцем почти невозможно, а с клавиатуры придётся долго нажимать стрелки. Ползунок хорош для примерных величин: громкость, яркость, цена «до». Для точных чисел используйте type="number".