Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

36 of 39
BS5 Select MenusBS5 Checks and RadiosBS5 RangeBS5 Input GroupsBS5 Floating Labels

📏 BS5 Range

📌 What Is the Bootstrap 5 Range Input?

Style <input type="range"> with .form-range. It gives a custom track and thumb. Use with .form-label and optional min, max, value, and step.

📏 Basic Range (.form-range)

.form-range – applies Bootstrap’s range slider styling. Use on <input type="range">. No other classes needed for the slider itself.

Example02
Loading editor…

✅ Range Best Practices

  • Use .form-label and for / id.
  • Set min, max, and optionally value and step.

🧠 Test Your Knowledge

2 Questions
Progress: 0 / 2