Bootstrap 5 Range

Range Features

<input type="range" min="0" max="100">

<input type="range" step="5">

<input type="range" value="50">

<input type="range" disabled>

🔹 Basic Range Slider

Basic range sliders, created with `input type="range"` and the `form-range` class, provide intuitive graphical control for selecting numeric values between 0 and 100. Users can drag the handle or click the track to set values, offering a more engaging alternative to text input. This component is perfect for settings like volume, brightness, or filters where approximate values are sufficient. Bootstrap's styling ensures consistent appearance and smooth interaction across browsers, enhancing form interactivity and modern UI design.

<label for="customRange1" class="form-label">Basic Range</label>
<input type="range" class="form-range" id="customRange1">

🔹 Range with Min and Max

Defining minimum and maximum values with `min` and `max` attributes constrains the selectable range, tailoring sliders to specific contexts like ratings (0-5) or price filters ($10-$1000). This customization ensures sliders reflect realistic value boundaries, improving user intuition and data accuracy. It is essential for forms requiring controlled numeric input, such as configurators, surveys, or settings panels. Clear labeling of min/max values further enhances usability, helping users understand the available range at a glance.

<label for="customRange2" class="form-label">Range with min and max (0-10)</label>
<input type="range" class="form-range" min="0" max="10" id="customRange2">

🔹 Range with Steps

The `step` attribute controls value increments, allowing precise intervals like whole numbers, decimals, or custom jumps (e.g., step="5" for multiples of five). This is crucial for sliders requiring specific granularity, such as percentage selectors, quantity pickers, or measurement tools. Steps ensure users select only valid, predefined values, reducing input errors and simplifying backend processing. This feature enhances slider professionalism and reliability, making it suitable for financial, engineering, or configuration interfaces where precision matters.

<label for="customRange3" class="form-label">Range with steps (step=5)</label>
<input type="range" class="form-range" min="0" max="100" step="5" id="customRange3">

🔹 Range with Default Value

Setting a default value with the `value` attribute pre-positions the slider handle, providing a starting point or recommended selection when the page loads. This improves user experience by suggesting common or safe values, reducing decision fatigue, and speeding up form completion. Defaults are especially useful in settings panels, product configurators, or filters where typical values guide user choices. It ensures forms are pre-filled intelligently, enhancing usability and encouraging interaction with sensible starting parameters.

<label for="customRange4" class="form-label">Range with default value (50)</label>
<input type="range" class="form-range" min="0" max="100" value="50" id="customRange4">

🔹 Disabled Range

Adding the `disabled` attribute to a range slider prevents user interaction, graying out the control to indicate unavailability or read-only status. This is useful for displaying preset values that cannot be changed, conditional form logic, or tutorial interfaces. Disabled sliders maintain visual consistency while clearly communicating non-interactivity, preventing user frustration from non-functional controls. Proper implementation ensures accessibility by including appropriate ARIA attributes and explanatory text for assistive technologies.

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

🔹 Range with Value Display

Dynamically displaying the current slider value with JavaScript provides real-time feedback, essential for precision tasks like volume adjustment or price setting. Updating a nearby span or div as the slider moves helps users understand exact selections without guesswork. This enhancement is critical for applications where numerical clarity impacts decisions, such as financial tools, design editors, or configuration dashboards. It improves user confidence, reduces errors, and creates a more interactive, transparent interface.

<label for="rangeWithValue" class="form-label">Range with value display</label>
<div class="d-flex align-items-center">
    <input type="range" class="form-range me-3" min="0" max="100" value="50" id="rangeWithValue">
    <span id="rangeValue" class="badge bg-primary">50</span>
</div>

<script>
const rangeInput = document.getElementById('rangeWithValue');
const rangeValue = document.getElementById('rangeValue');

rangeInput.addEventListener('input', function() {
    rangeValue.textContent = this.value;
});
</script>

🔹 Multiple Range Sliders

Multiple range sliders on a single form enable independent control over several parameters, such as price range, size filters, or multi-setting adjustments. Each slider operates with its own min, max, step, and value attributes, allowing complex filtering or configuration in a compact space. This pattern is ideal for advanced search interfaces, product filters, or control panels where users need to fine-tune multiple criteria simultaneously. Careful layout ensures sliders are clearly labeled and spaced, preventing confusion and enhancing overall usability.

<div class="mb-3">
    <label for="volumeRange" class="form-label">Volume</label>
    <input type="range" class="form-range" min="0" max="100" value="70" id="volumeRange">
</div>

<div class="mb-3">
    <label for="brightnessRange" class="form-label">Brightness</label>
    <input type="range" class="form-range" min="0" max="100" value="80" id="brightnessRange">
</div>

<div class="mb-3">
    <label for="contrastRange" class="form-label">Contrast</label>
    <input type="range" class="form-range" min="0" max="100" value="50" id="contrastRange">
</div>