Range & Input Groups

In Bootstrap , Range and Input Groups are two ways to enhance how your forms look and operate. “Range” is a slider for selecting values; “Input Groups” is a way to “attach” text or buttons to your text fields.

1. Range (The Slider)

A Range is a stylable alternative to the dull native browser slider. It‘s ideal for volume controls, price sliders, or anything else where the value isn‘t as important as the “feel” of the number.

How to use it:

You simply add the class .form-range to an <input type="range">.

Min and Max: You can set the boundaries using min="0" and max="5".
Steps: If you want the slider to “snap” to specific intervals (like jumping by 0.5), use the step attribute.

Note: Bootstrap automatically styles the track (the line) and the thumb (the dot you slide) to look consistent across Chrome, Firefox, and Safari.

2. Input Groups (The “Add-ons”)

nput Groups You can prepend or append text, icons, or even buttons to a standard text input. This can be used to give the user context (”$” for dollar amounts, ”@” for username, etc).

The Basic Structure

To create one, you wrap your input in a <div> with the class .input-group. Inside that div, you use a <span> with the class .input-group-text.

Common Examples:

Prepending: Putting a symbol at the start.
- Example: [@] [Username]
Appending: Putting a label at the end.
- Example: [Recipient's username] [@example.com]
Buttons: You can even attach a “Search” or “Submit” button directly to the input field so they look like one single unit.

Sizing

You can make the entire group larger or smaller by adding these classes to the parent container:

.input-group-sm (Small)
.input-group-lg (Large)

Why use them?

Clarity: A “$” symbol inside the box clearly tells the user “enter currency here” without needing a separate label.
Aesthetics: It makes your forms look “connected” and modern rather than having a bunch of separate, floating boxes.
Mobile Friendly: Bootstrap ensures these groups wrap and scale correctly on phones.