What is the best way to showcase a bootstrap range slider and ensure the corresponding value is reflected in the input field?

I have implemented the bootstrap 5 range component, but I am encountering some issues

  1. Why is the dot not displaying in the center of the line even though I added the min value of 1?
  2. Is there a way to display the value of the range in the input field?
  3. How can I change the background color or apply a linear gradient to the line?

.customRange {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: transparent;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.customRange:hover {
  opacity: 1;
}

.customRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.customRange::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e203e203d7275647123">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="w-50 mx-auto">
  <div class="d-flex justify-content-between"><label>Range</label>
    <div><input type="text" name="" value="">%</div>
  </div>
  <input type="range" class="form-range customRange" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
  <div class="d-flex justify-content-between">
    <span>1</span>
    <span>100</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

htmljquerycsstwitter-bootstraprange

Answer №1

To initialize your thumb at 1, remember to use value="1". Then, create a change event on the range input and assign the value to your other inputs using $(this).val(). The third issue is not clear because the documentation states, 

supports "filling" their track.., we do not currently support it...
.

Demo Code :

$("input[type=range]").on("change input", function() {
  $("[name=values]").val($(this).val())//assign value..
})
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfddd0d0cbcccbcddecfff8a918f918f92dddacbde8c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet>
<div class="w-50 mx-auto">
  <div class="d-flex justify-content-between"><label>Range</label>
    <div><input type="text" name="values" value="">%</div>
  </div>
  <!- -use value=1- ->
  <input type="range" class="form-range customRange" value="1" min="1" max="100>
  <div class="d-flex justify-content-between">
    <span>1</span>
    <span>100</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer №2

document.addEventListener("DOMContentLoaded", function() {
  $(document).ready(function() {
    var slider = document.getElementById("LoanTermSlider");
    var span = document.getElementById("slider-label");
    var marginValue = parseInt(slider.value) * 5 - 4;
    var attrValue = "margin-left:" + marginValue + '%;';
    span.setAttribute('style', attrValue);
    var _yrsTxt = "years.";
    if (parseInt(slider.value) < 10) {
      _yrsTxt = "year.";
    }
    span.innerHTML = slider.value + " " + _yrsTxt;

    slider.oninput = function() {
      marginValue = parseInt(this.value) * 5 - 4;
      if (parseInt(this.value) == 20) {
        marginValue -= 6;

        if (screen.width < 993) {
          marginValue -= 6;
        }
      }
      span.setAttribute('style', 'margin-left:' + marginValue + '%;');
      _yrsTxt = "years.";
      if (parseInt(this.value) < 10) {
        _yrsTxt = "year.";
      }
      span.innerHTML = this.value + " " + _yrsTxt;
    }
  });
});
._yrs {
  font-size: 15px;
  color: #297195;
  display: inline-block;
}

#LoanTermSlider {
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="">
  <span class="_yrs" id="slider-label"></span>
  <input type="range" class="form-range" min="1" max="20" step="1" id="LoanTermSlider" name="LoanTermSlider">
  <div class="d-flex justify-content-between">
    <span class="max-amount f-16 font-weight-normal darkGray-color text-right mt-1">1 year.</span>
    <span class="max-amount f-16 font-weight-normal darkGray-color text-right mt-1">20 years.</span>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Page elements subtly move when reloading in Chrome

I am experiencing an issue with a div that has left and top offsets randomly selected from an array of values upon page load. Most of the time, it works fine. However, occasionally, upon refreshing the page, the window scrolls down slightly, revealing the ...

javascripthtmlcss

jQuery Form Validator: requiring double submission

I've been working on implementing the Form Validator using Jquery. After some testing, I noticed that I have to click the submit button twice before the validation kicks in. Why is that? The script is housed in a separate file and included in my proj ...

javascriptjqueryajaxformsvalidation

Basic event listener function, functional in CodePen but not operating in Chrome web browser

I'm experiencing an issue where event listener functions are not working on my browser (Chrome), but they work fine on CodePen. I've been troubleshooting this for about 2 hours, and I'm seeking some insights. Can anyone help? CodePen Link: ...

javascripthtml

Navigating an HTML table with Selenium and Python by scrolling down

I am currently working on a project where I need to automate scrolling down an HTML table until the last row becomes visible. The table initially displays around 20 rows and then loads more as one scrolls down. To achieve this task, I am using Selenium web ...

htmlpython-2.7selenium-webdriver

What is the best way to eliminate a CSS style from a div?

I have implemented jQuery Autosize to automatically adjust the height of textarea elements. It works perfectly when I focus on the textarea element. However, when I blur out of the textarea, I want to reset the height to its default value. I am unsure of ...

javascriptjquerycssreplace

Do designers often manually adjust elements using media queries when working with Bootstrap?

Is it common practice to directly invoke media queries in order to manually adjust the layout of elements when using Bootstrap? In other words, if I have a custom element that I need to display or position in a specific way, is it acceptable to call the m ...

htmlcsstwitter-bootstrapmedia-queries

Trouble accessing onclick function

My dataSend AJAX function is not being called when I use the onclick event. I have checked in the Inspector of my browser and confirmed that the click handler is attached to it. However, when I set a breakpoint in the function using the Debugger, it never ...

javascriptphphtmlajax

Troubleshooting MVC3 @Ajax.ActionLink: Unexpected Page Display Instead of Target UpdateId Replacement

My current project is built with VS2010/.net4/MVC3 (MVC4 encounters the same issue) I am attempting to invoke an AJAX function in my project @Ajax.ActionLink("Display ALL Cbms results", "All" , "Cbms", new AjaxOptions() { HttpMethod = "GET", Upda ...

jqueryajaxasp.net-mvc-3

What is the best way to adjust the minimum width of the HTML5 progress element?

There is a similar question which addresses input elements having a minimum width determined by the size parameter. I am attempting to create a layout with an inline-flex element with a flex-direction: column property like this: .item { border: 1px s ...

htmlcssflexbox

In both Chrome and Edge, the default value for the <select> tag is successfully set, however, this functionality is not working in

I have defined two values in the created method, 2018 and My Name, and assigned them to separate data properties. These data properties are then passed as v-bind to a component. The issue I am facing is that in Chrome and Edge, both values are set as defa ...

javascripthtmlvue.js

Having trouble getting your Bootstrap v4 carousel to function properly?

Currently, I have implemented the carousel feature from Bootstrap v4 in a Vue web application. I am following the same structure as shown in the sample example provided by Bootstrap, but unfortunately, it is not functioning correctly on my local setup and ...

javascriptcsstwitter-bootstrapcarouselvue.js

Get a file from a distinct internal server than the one where the website is operating

I am trying to download a file from an internal server that is separate from the one where the website is hosted. I have attempted various methods such as... <a href="javascript:Start('file://servername/path/filename.txt')> <a href="// ...

javascripthtml

The particles.js with absolute positioning is currently overlapping my div with relative positioning

Visit this link <div class="outer-container"> <div id="particles-js"> <div class="your-content"> <article id="3" class="bg-dusk transition md:group-hover:opacity-50 md:hover:opacity-important md:hov ...

htmlcssvue.js

Issues with Angular and Bootstrap: ng-hide functionality not functioning correctly

I am struggling to grasp the concept of the ng-show angular directive as it is not functioning correctly for me. Despite following some examples I found online, I cannot seem to change the boolean value in the controller like they suggest. Instead of using ...

javascriptjqueryangularjstwitter-bootstrap

Steps for passing a Javascript variable through POST method and then redirecting to a different page

I am facing an issue with sending a JavaScript variable via POST to a PHP page and displaying the new page. Despite checking the variable using Wireshark and confirming that it is sent correctly (key and value), the new page does not show anything. $(docu ...

javascriptphpjquery

Using a carousel component in Bootstrap

Just starting out with this, trying to customize Bootstrap to change slides automatically. I followed the documentation at https://getbootstrap.com/docs/4.3/components/carousel/ but for some reason, the slides aren't changing on an interval, even thou ...

javascripthtmlcssbootstrap-4carousel

Is there a clash between ng-if and col col-50?

Currently, I am attempting to create a table using Angular code within HTML. The structure of the table is exactly how I want it to be, and here is the code snippet representing it: <div class="row"> <div class="col col-25">Date</div> ...

htmlcssangularjs

The PHP file I'm trying to access isn't receiving the GET request from my PHP script

Basically, I want a button on one php page to trigger the printing of a new php page. This feature is working perfectly. The only issue is that I am trying to ensure the user ID gets passed over to the second page and displayed there. Strangely, it seems t ...

phphtmlget

The display of Bootstrap Cards may become distorted when incorporating J Query

I am attempting to design a dynamic HTML page that pulls data from a JSON response using an AJAX request. My goal is to display three columns in a row, but currently I am only seeing one column per row. I would greatly appreciate any guidance on what migh ...

javascripthtmljqueryjsonbootstrap-4

Blurry black-and-white picture

As a beginner in HTML and CSS, I am still learning. I have a challenge where I have two images and when one of them is hovered over, it should increase in size and display text. Additionally, I want the image that is not in focus to appear in grayscale. Wh ...

htmlcss