Как сделать такой input type range?

Для создания элемента input с типом range (ползунок) в HTML можно использовать следующий код:

Где:
- type="range" указывает на то, что это элемент с ползунком;
- id="myRange" - уникальный идентификатор элемента, который можно использовать для обращения к нему через JavaScript или CSS;
- min="0" и max="100" - минимальное и максимальное значения, которые можно выбрать на ползунке;
- step="1" - шаг изменения значения при перемещении ползунка.

Также можно добавить атрибуты value для установки начального значения и onchange для отслеживания изменений значений ползунка:

В JavaScript можно написать функцию updateValue для обновления значения в реальном времени:

 
function updateValue(value) {
  console.log(value);
}

Теперь при перемещении ползунка значение будет выводиться в консоль браузера. Это базовый пример создания элемента input с типом range в HTML. В зависимости от потребностей можно добавлять дополнительные стили, обработчики событий и функциональность.