Увеличить диапазон ввода

Question

Я хочу иметь диапазон ввода с большим курсором и полосой (не длиннее).

<input id="speed" type="range" min="10" max="80" />

Как мне поступить?

Спасибо за помощь.

Answer 1

Я предполагаю, что под большим вы просто подразумеваете большую область для захвата и перетаскивания, поэтому это должно работать:

#range {
  position: relative;
  transform: scale(1.3); /* Or however big you want it */
  transform-origin: 0 0;
}

<input type="range" id="range">

Это что-то хакерское, но это работает.

Answer 2

По состоянию на конец 2018 года не существует кросс-браузерного способа сделать это, однако есть способы сделать это в большинстве браузеров.

• Firefox: ::-moz-range-thumb и ::-moz-range-track.
• Chrome: ::-webkit-slider-thumb и ::-webkit-slider-runnable-track.
• Edge: ::-ms-thumb и ::-ms-track.
• Safari: не уверен.

Более полное руководство и примеры использования этих псевдоэлементов Эта статья об уловках CSS