Bootstrap 5 Range

Bootstrap 5 range uses custom inputs or values for cross-browser consistency and built-in customization.

The bootstrap 5 range input type allows us to ask the user for a number even if the user does not care or an unaware of the specific numeric value selected. Here are a few examples of how range inputs are typically used: Audio controls such as volume and balance and filter controls.

Bootstrap 5 technology uses classes to create custom range controls. The track or background and value are both styled to look the same in all browsers. We do not now support "filling" their track from the left or right of the thumb to visually indicate progress because only Firefox does.

Bootstrap 5 custom range

The ".form-range" class creates custom range controls with an input element and the "range" type. The custom range works as a simple and default function for the value.

Syntax

The bootstrap 5 custom range element shows syntax below.

Example

The following example creates custom range using input tag with range type and the "form-range" class in the form.

Output

The below image shows the custom range using bootstrap 5 classes and elements.

Bootstrap 5 Disabled range

The ".form-range" class uses the "disabled" keyword to create disabled range controls. It requires the input element and the "range" type. The disabled range deactivates the function, and we do not use the function.

Syntax

The bootstrap 5 disabled range element shows syntax below.

Example

The following example creates disabled range using the "disabled" keyword with range type and the "form-range" class in the form.

Output

The below image shows the custom range using bootstrap 5 classes and elements.

Bootstrap 5 min and max range

The range function provides a minimum and maximum value. The minimum and maximum values are 0 and 100, respectively. It requires the input element and the "range" type. The ".form-range" class uses the "min" and "max" keywords with values to control the range.

Syntax

The bootstrap 5 disabled range element shows syntax below.

Example

The following example creates minimum and maximum value's range using the elements in the form.

Output

The below image shows the minimum and maximum range using bootstrap 5 classes and elements.

Bootstrap 5 step range

A bootstrap 5 range function provides steps to control function with data. The interval between the range numbers is set to 1 by default. The "step" attribute allows us to adjust it. This function requires the input element and the "range" type. The ".form-range" class uses the "step" keyword with value to control the range.

Syntax

The bootstrap 5 step range element shows syntax below.

Example

The following example creates step range using the "step" keyword with value and the "form-range" class in the form.

Output

The below image shows the step range using bootstrap 5 classes and elements.

Conclusion

The bootstrap 5 range function controls the value of the input function. We can change the value of the input using the range element. These features are used in the form of user interaction. The bootstrap 5 range function creates a form function to control numerical value.