How to use input type="range" in Bootstrap
Share
Bootstrap is a CSS framework that provides pre-built components and utilities for building responsive web applications. It simplifies web development by offering a consistent design and layout. With its responsive grid system, CSS components, and JavaScript plugins, Bootstrap enables developers to quickly create visually appealing and mobile-friendly websites.
input type="range" in Bootstrap
In Bootstrap, the input element with type="range" is a form input that allows users to select a value within a specified range. It can be styled using the form-range class to provide a visually appealing slider interface. Bootstrap’s range input simplifies the process of creating interactive and user-friendly range selection controls in web applications.
How to use input type="range"
To use input type = "range" in Bootstrap, let’s follow the steps given below.
Step 1: Set Up the HTML File
Create a new HTML file and open it in your preferred text editor or IDE. You can name the file index.html or choose any other name that suits your project.
Step 2: Include Bootstrap CSS and JavaScript
To use Bootstrap, we need to include its CSS and JavaScript files. We will use a content delivery network (CDN) to include the files remotely.
This can be done by adding the following code in the <head> section of your code in index.html file.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
This line of code includes the Bootstrap CSS file from the CDN.
To add a Bootstrap JavaScript file, add the following code just before the closing </body> tag in index.html file.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Step 3: Create a range input
Now that we have set up Bootstrap, let’s create a range input element. Inside the <body> section of your HTML file, add the following code:
<div class="container"><form><div class="form-group"><label for="rangeInput">Range Input</label><input type="range" class="form-range" id="rangeInput"></div></form></div>
Code explanation
- We wrap the form elements inside a
<div>element with the classcontainer. This class ensures the content is centered and responsive. - Within the form, we have a
<div>element with the classform-group. This class adds spacing and styling to the form elements within it. - Inside the
form-groupdiv, we have a<label>element with theforattribute set to"rangeInput". This associates the label with the input element. - Finally, the range input is denoted by the
<input>element withtype="range". We apply theform-rangeclass to style the range input.
Example
Conclusion
The above executable code is an example of a web application of input type="range", which contains the range input widget along with the code to include Bootstrap CSS and Javascript in the application. We can dynamically move the bar to change the input value after executing the above code.
