Show value of Bootstrap 4 range input

Question

I want to have a range input with the value shown somewhere. In this Bootstrap tutorial, the value isn't shown: https://getbootstrap.com/docs/4.1/components/forms/#range-inputs


  
    
      Example Range input

I want the minimum of custom modifications and no Javascript if possible.

Thank you for your help.

user_6113539 · Answer

I don’t think it’s possible without Javascript, but try this simple solution:


  
    
      Example Range input
      
      50

user_4026660 · Answer

Here is how to do it with vanilla JS. Preferably use onChange as onInput will only get called when the user initially sets a value, not when she changes it.


  
    
      Example Range input
      
      50

user_13919925 · Answer

  let range = $("#range-km");
  let rangeV = $("#rangeV");
  const setValue = () => {
    let newValue = Number(
        ((range.val() - range.attr("min")) * 100) /
          (range.attr("max") - range.attr("min"))
      ),
      newPosition = 10 - newValue * 0.2;
    rangeV.html(`${range.val()}km`);
    rangeV.css("left", `calc(${newValue}% + (${newPosition}px))`);
  };
  setValue();
  range.on("input", setValue);

#search-bar {
  width: 70%;
  margin: 50px auto;
}

#search-bar input {
  border: 1px solid #ced4da;
  border: 0;
  -webkit-appearance: none;
}

#search-bar .input-group {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

#search-bar input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: #03a9f4;
  border-radius: 25px;
}

#search-bar input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}

#search-bar input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #03a9f4;
}

#search-bar .range-wrap {
  padding: 4px 6px 0px 6px;
  position: relative;
}

#search-bar .range-value {
  position: absolute;
  top: -50%;
}

#search-bar .range-value span {
  width: 40px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: #03a9f4;
  color: #fff;
  font-size: 12px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 6px;
}

#search-bar .range-value span:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #03a9f4;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}

Show value of Bootstrap 4 range input

3 Answers