Bootstrap 5 FormsLesson 37Free preview

BS5 Range

This lesson is part of Bootstrap · All levels

Summary

The input range or slider is given Bootstrap style with class .form-range, resulting in a slider with an attractive pointer circle. The minimum, maximum, and step values are set by the attributes min, max, and step. These sliders are often used for price filters or volume controllers.

Key points

I'm going to decorate it. (<input type="range">) (.form-range)
Min determines the lowest value, the highest max value, the shift distance step.
The value determines the slider's starting position.
The label still uses .form-label for readability.
The slider works in the browser without additional JavaScript.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.