Bootstrap - Range

Range Input Basics

The Range input in Bootstrap is a slider control that lets users select a value from a range. It provides a way for users to input numeric values within a defined range. Let's look at the basics of using Range inputs in Bootstrap.

To create a Range input, you use the <input> element with the type attribute set to "range".

<input type="range" class="form-range" id="myRange">

By default, the Range input will have a value that falls somewhere between 0 and 100. But you can change the minimum and maximum values using the min and max attributes.

<input type="range" class="form-range" id="myRange" min="0" max="50">

In this case, the Range input will allow values between 0 and 50.

You can also control the increment step of the Range input using the step attribute. This sets the size of each interval between values.

<input type="range" class="form-range" id="myRange" min="0" max="100" step="10">

With a step of 10, the Range input will only allow values in increments of 10 (e.g., 0, 10, 20, 30, etc.).

By changing the min, max, and step attributes, you can adjust the Range input to fit your specific needs.

Bootstrap automatically styles the Range input with a default look, but you can further customize its appearance using CSS. We'll look at Range input styling options in the next section.

Range Input Styling

Bootstrap applies some default styling to Range inputs to make them consistent with other form controls. However, you can also customize the look of Range inputs using CSS to match your specific design requirements.

By default, Bootstrap styles the Range input as a horizontal slider with a track and a thumb. The track represents the range of possible values, while the thumb is the handle that selects a specific value.

To customize the look of the Range input, you can target its CSS classes and properties. Bootstrap provides the .form-range class that you can use as a starting point for styling.

.form-range::-webkit-slider-thumb {
  background-color: #007bff;
}

.form-range::-moz-range-thumb {
  background-color: #007bff;
}

.form-range::-ms-thumb {
  background-color: #007bff;
}

You can also adjust the width and height of the Range input track and thumb using CSS:

.form-range {
  width: 100%;
  height: 1rem;
}

.form-range::-webkit-slider-thumb {
  width: 1.5rem;
  height: 1.5rem;
}

.form-range::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
}

.form-range::-ms-thumb {
  width: 1.5rem;
  height: 1.5rem;
}

By customizing the CSS of the Range input, you can make it match your page design and provide a good user experience.

Labeling Range Inputs

When using Range inputs in Bootstrap, you should provide labels that communicate the purpose of the input to users. Labels help users understand what value they are selecting and what the range represents. Bootstrap lets you add labels to Range inputs and position them in different ways.

To add a label to a Range input, you can use the <label> element and associate it with the input using the for attribute. The for attribute should match the id of the Range input.

<label for="myRange">Select a value:</label>
<input type="range" class="form-range" id="myRange">

By default, the label will be positioned above the Range input. However, you can control the placement of the label using CSS. You can position the label below the Range input by changing the display property of the label.

<input type="range" class="form-range" id="myRange">
<label for="myRange" class="form-label">Select a value:</label>

.form-label {
  display: block;
  margin-top: 0.5rem;
}

You can also show the selected value of the Range input dynamically. This provides real-time feedback to users as they adjust the Range input.

<input type="range" class="form-range" id="myRange" min="0" max="100" step="1">
<p>Selected value: <span id="rangeValue"></span></p>

const rangeInput = document.getElementById('myRange');
const rangeValue = document.getElementById('rangeValue');

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

By adding labels and displaying the selected value dynamically, you can make your Range inputs more user-friendly and informative. Users will have a clear understanding of what they are selecting and can see the current value in real-time.

Range Input Variations

While the default Range input in Bootstrap is a horizontal slider, you can create variations to fit different design needs. Let's look at some ways to modify Range inputs.

One variation is to create a vertical Range input. To do this, you can use CSS to rotate the Range input by 90 degrees and change the width and height.

<input type="range" class="form-range" id="myRange">

.form-range {
  width: 200px;
  height: 30px;
  transform: rotate(-90deg);
  transform-origin: center;
}

This will create a vertical Range input that users can slide up and down to select a value.

Another variation is to use multiple Range inputs together. This can be useful when you want users to select a range of values instead of a single value.

<label for="minRange">Min Value:</label>
<input type="range" class="form-range" id="minRange" min="0" max="100" step="1">

<label for="maxRange">Max Value:</label>
<input type="range" class="form-range" id="maxRange" min="0" max="100" step="1">

const minRange = document.getElementById('minRange');
const maxRange = document.getElementById('maxRange');

minRange.addEventListener('input', function() {
  if (parseInt(this.value) >= parseInt(maxRange.value)) {
    maxRange.value = this.value;
  }
});

maxRange.addEventListener('input', function() {
  if (parseInt(this.value) <= parseInt(minRange.value)) {
    minRange.value = this.value;
  }
});

In this example, we have two Range inputs: one for the minimum value and one for the maximum value. We use JavaScript to make sure the minimum value cannot be greater than the maximum value, and vice versa.

You can also combine Range inputs with other form elements, such as checkboxes or radio buttons, to create more complex input controls.

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

<div>
  <input type="checkbox" id="option1" value="10">
  <label for="option1">Option 1</label>
</div>
<div>
  <input type="checkbox" id="option2" value="20">
  <label for="option2">Option 2</label>
</div>

const rangeInput = document.getElementById('myRange');
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      rangeInput.value = this.value;
    }
  });
});

In this variation, we have checkboxes that, when checked, set the value of the Range input to a specific value associated with each checkbox.

Accessibility Considerations

When using Range inputs in Bootstrap, make sure they are accessible to all users, including those with disabilities. Accessibility involves making sure that users can easily interact with and understand the purpose of the Range input, regardless of their abilities. Here are some ways to improve the accessibility of Range inputs.

First, add proper ARIA (Accessible Rich Internet Applications) attributes to the Range input. ARIA attributes help convey the meaning and purpose of the input to assistive technologies, such as screen readers.

<label for="myRange">Select a value:</label>
<input type="range" class="form-range" id="myRange" min="0" max="100" step="1" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">

We added the aria-valuenow, aria-valuemin, and aria-valuemax attributes to the Range input. These attributes communicate the current value, minimum value, and maximum value of the Range input to assistive technologies.

Next, make sure the Range input can be operated using keyboard navigation. Some users may rely on keyboards instead of mice or touch screens to interact with web pages. To support keyboard navigation, you can use the tabindex attribute to define the order in which form controls receive focus when the user presses the Tab key.

<label for="myRange">Select a value:</label>
<input type="range" class="form-range" id="myRange" min="0" max="100" step="1" tabindex="0">

By setting tabindex="0", you make the Range input focusable and reachable using the keyboard. Users can then use the arrow keys to adjust the value of the Range input.

Provide clear instructions and labels for the Range input. Labels help users understand the purpose of the input and what values they can select. You can also provide additional instructions or hints using the aria-describedby attribute.

<label for="myRange">Select a value between 0 and 100:</label>
<input type="range" class="form-range" id="myRange" min="0" max="100" step="1" aria-describedby="rangeInstructions">
<p id="rangeInstructions">Use the slider to select a value. You can also use the arrow keys to adjust the value.</p>

By providing clear labels and instructions, you help all users, including those with disabilities, understand how to interact with the Range input.

By keeping accessibility in mind and implementing these techniques, you make your Range inputs usable and understandable for all users. Accessible forms are an important part of creating an inclusive web experience.

Range Input Events

When working with Range inputs in Bootstrap, you can handle user interactions and respond to value changes using JavaScript. This lets you create interactive experiences and update other elements on the page based on the selected value of the Range input.

To handle user interactions, you can attach event listeners to the Range input. The most common event to listen for is the input event, which is triggered whenever the value of the Range input changes.

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

const rangeInput = document.getElementById('myRange');

rangeInput.addEventListener('input', function() {
  console.log('Range value changed:', this.value);
});

You can use the value obtained from the Range input to update other elements on the page. For example, you can display the selected value in a separate element.

<input type="range" class="form-range" id="myRange" min="0" max="100" step="1">
<p>Selected value: <span id="rangeValue"></span></p>

const rangeInput = document.getElementById('myRange');
const rangeValue = document.getElementById('rangeValue');

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

You can also use the Range input value to control the appearance or behavior of other elements. For instance, you can change the width of a progress bar based on the Range input value.

<input type="range" class="form-range" id="myRange" min="0" max="100" step="1">
<div class="progress">
  <div class="progress-bar" id="progressBar" role="progressbar" style="width: 50%;"></div>
</div>

const rangeInput = document.getElementById('myRange');
const progressBar = document.getElementById('progressBar');

rangeInput.addEventListener('input', function() {
  progressBar.style.width = this.value + '%';
});

By using JavaScript to handle Range input events and update other elements, you can create interactive and dynamic user experiences. Users can see the effects of their interactions in real-time, providing a more engaging and responsive interface.