Bootstrap 4 Range Slider Value Display

Enhance user interaction on your website by displaying slider values with Bootstrap 4 range sliders. Learn how to provide real-time feedback to users as they adjust the slider.

Introducing our Bootstrap 4 Range Slider with Value Display, a sophisticated UI component designed to provide real-time feedback and enhance user interaction on your website. This range slider allows users to select a value or range of values by dragging a handle along a track, while simultaneously displaying the selected value, ensuring precise adjustments and user satisfaction.

Built on the robust Bootstrap 4 framework, our Range Slider with Value Display offers a clean and modern design that integrates seamlessly with any website layout. Perfect for applications like pricing filters, volume controls, or any adjustable parameter, this component guarantees a responsive and user-friendly experience.

Key Features:

  • Real-Time Value Display: Show the selected value dynamically as users drag the slider handle, providing immediate feedback and enhancing user interaction.
  • User-Friendly Interface: Offer an intuitive slider that allows users to easily select and adjust values with a simple drag-and-drop action.
  • Customizable Styles: Personalize the appearance of the range slider and value display using Bootstrap's utility classes, including track colors, handle styles, sizes, and value labels, to match your website's design aesthetic.
  • Responsive Design: Ensure consistent functionality across desktops, tablets, and mobile devices with a range slider that adapts fluidly to various screen sizes.
  • Easy Integration: Integrate the Bootstrap 4 Range Slider with Value Display component effortlessly into your website's HTML and CSS, leveraging Bootstrap's components for quick deployment and customization.

Enhance your website's user interaction and input precision with our Bootstrap 4 Range Slider with Value Display. Whether you're fine-tuning settings, filtering content, or controlling parameters, this range slider provides a reliable and visually appealing solution to improve user engagement and satisfaction.

Steps to Copy the Code

Step 1: Copy the Code Snippet

  • Begin by copying the HTML and CSS code snippet provided above. This snippet includes the necessary structure and styles to create a range slider with value display using Bootstrap 4. Select the code, click the copy button, and paste it into your HTML file where you want the range slider to appear.

Step 2: Link Bootstrap CSS

  • Ensure that Bootstrap's CSS is correctly linked in your HTML document. Add the following <link> tag in the <head> section to import Bootstrap's stylesheet:
  • <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  • This link fetches Bootstrap's CSS file from the official Bootstrap CDN, ensuring your range slider inherits Bootstrap's styling.

Step 3: Customize and Make it Yours

  • Personalize the range slider to align with your website's design and functionality requirements. Modify the appearance of the range slider, such as colors, sizes, and handles, by adjusting Bootstrap's CSS classes or adding custom CSS. Customize the functionality of the range slider to dynamically display its value, such as updating a label or text field as the slider is adjusted, to enhance user experience.

Code Explanation

HTML Code

Form Element
<form class="range-form">
  • <form class="range-form">: This is the start of a form element. The class="range-form" assigns the range-form class to the form.
Form Group
<div class="form-group row">
  • <div class="form-group row">: This creates a Bootstrap form group that arranges form controls in a row. The form-group class adds spacing and structure to the form controls, and the row class arranges its children in a horizontal row using Bootstrap's grid system.
Range Slider Column
<div class="col-md-9">
      <input type="range" min="1" max="100" value="50" class="form-control-range range-slider" id="myRange">
    </div>
  • <div class="col-md-9">: This creates a column that spans 9 out of 12 grid columns on medium and larger screens (col-md-9).
  • <input type="range" min="1" max="100" value="50" class="form-control-range range-slider" id="myRange">: This creates an input element of type "range", which displays as a slider. The form-control-range class is a Bootstrap class for styling range inputs, and range-slider can be a custom class for additional styling. The id="myRange" allows for referencing this element in JavaScript or CSS. The slider has a minimum value of 1, a maximum value of 100, and an initial value of 50.
Display Column
<div class="col-md-3">
      <span id="demo">0</span>
    </div>
  </div>
</form>
  • <div class="col-md-3">: This creates a column that spans 3 out of 12 grid columns on medium and larger screens (col-md-3).
  • <span id="demo">0</span>: This creates a span element with an id of demo and an initial content of 0. This span can be used to display the current value of the range slider dynamically, typically with JavaScript.

JavaScript Code

Variables for Slider and Output
let slider = document.getElementById("myRange");
let output = document.getElementById("demo");
  • let slider = document.getElementById("myRange");: This line selects the range slider input element from the HTML document using its id attribute (myRange) and stores it in the variable slider.
  • let output = document.getElementById("demo");: This line selects the span element (where the slider's value will be displayed) using its id attribute (demo) and stores it in the variable output.
Initial Output Value
output.innerHTML = slider.value;
  • output.innerHTML = slider.value;: This line sets the initial content of the output span element to the current value of the slider. This ensures that when the page loads, the displayed value matches the initial position of the slider.
Update Function on Slider Input
slider.oninput = function() {
  output.innerHTML = this.value;
}
  • slider.oninput = function() { ... }: This assigns an anonymous function to the oninput event of the slider. The oninput event is triggered every time the value of the slider changes (i.e., when the user moves the slider thumb).
  • output.innerHTML = this.value;: Inside the function, this.value refers to the current value of the slider (this refers to the slider element within the context of this event handler). This line updates the content of the output span element to reflect the current value of the slider.