BootstrapHow-ToBeginner · 3 min read

How to Create Range Input in Bootstrap: Simple Guide

To create a range input in Bootstrap, use the <input type="range" class="form-range"> element. Bootstrap styles this input with a modern slider look and responsive design by adding the form-range class.

📐

Syntax

The basic syntax for a Bootstrap range input uses the input element with type="range" and the Bootstrap class form-range. You can add attributes like min, max, and step to control the slider's range and increments.

type="range": Defines the input as a slider.
class="form-range": Applies Bootstrap's slider styles.
min: Sets the minimum value.
max: Sets the maximum value.
step: Sets the increments between values.

html

<input type="range" class="form-range" min="0" max="100" step="1">

Output

A horizontal slider input with values from 0 to 100 in steps of 1.

💻

Example

This example shows a complete Bootstrap range input slider with a label. It demonstrates how the slider looks and behaves with Bootstrap styling.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Range Input Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <label for="customRange" class="form-label">Example Range input</label>
    <input type="range" class="form-range" min="0" max="50" step="5" id="customRange">
  </div>
</body>
</html>

Output

A labeled horizontal slider with values from 0 to 50 in steps of 5, styled with Bootstrap's default slider style.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap range inputs include:

Forgetting to add the form-range class, which results in the default browser slider without Bootstrap styling.
Not setting min, max, or step attributes, which can cause unexpected slider behavior.
Using deprecated Bootstrap classes like form-control-range from older versions.

Always use Bootstrap 5 or later and the form-range class for proper styling.

html

<!-- Wrong: Missing form-range class -->
<input type="range" min="0" max="100">

<!-- Right: Includes form-range class -->
<input type="range" class="form-range" min="0" max="100">

Output

The first input shows a plain browser slider; the second input shows a styled Bootstrap slider.

📊

Quick Reference

Attribute/Class	Purpose	Example
type="range"	Defines the input as a slider
class="form-range"	Applies Bootstrap slider styles
min	Minimum slider value	min="0"
max	Maximum slider value	max="100"
step	Slider increments	step="5"

✅

Key Takeaways

Use input type="range" with Bootstrap's form-range class for styled sliders.

Always set min, max, and step to control slider behavior.

Bootstrap 5 introduced form-range; avoid older classes like form-control-range.

Include Bootstrap CSS for the slider to display with proper styling.

Test sliders on different devices to ensure responsive and accessible design.