Wide slider

Adjust a value with a filled track and a slim handle.

Preview

Basic rules

Do

  • Keep the filled proportion consistent with the adjusted value.

  • Provide a number, unit, keyboard adjustment and visible focus even with a large control surface.

Don't

  • Do not let fill animation delay the actual value or the response to input.

  • Do not use this interactive control as a read-only progress indicator just because both have a fill.