Search code examples
html

How to increase the length/size of HTML5 input type of range

How can I increase the length/size of the HTML5 range input to make it longer/bigger?

<!DOCTYPE html>
<html>
<body>
<form action="/" method="get">
  Points:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>
</body>
</html>

I tired attribute size="100px" and also width="100px" but they didn't work. I wonder if it is even possible to change the lenght/size of HTML5 range input:

enter image description here

Solution

  • Modifying the width works fine for me https://jsfiddle.net/j08691/592ydrk2/. Note you need to use CSS, not old, deprecated attributes.

    input[type="range"] {
  width:400px;
}
    <form action="/" method="get">
  Points:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>