loading

BS5 Range

Custom Range

Add the .form-range class to the input element with type=”range” in order to style a range menu:

Example

				
					<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange">
				
			

Steps

The gap between the range numbers is one by default. The step attribute can be used to alter it:

Example

				
					<input type="range" class="form-range" step="10">
				
			

Min and Max

The minimum value is 0 and the highest value is 100 by default. The min and/or max attributes can be used to modify it:

Example

				
					<input type="range" class="form-range" min="0" max="4">
				
			
Share this Doc

BS5 Range

Or copy link

Explore Topic