How to display a bootstrap range from the one and how to show the value in the input field?

user_9437856 0
Viewed 797

I am using bootstrap 5 range . I am getting some issues

  1. Why dot displaying in the center of the line? I added the min value of 1
  2. How can I display the value of the range in the input field?
  3. How to change the background color or linear gradient of 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/bootstrap@5.0.0-beta3/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>

twitter-bootstrap range css html jquery
1 Answers

You need to use value="1" to intialize your thumb at 1 . Then , write change event on range input and assign value using $(this).val() to your other inputs . I am not sure about 3rd issue because in that docs its written 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/bootstrap@5.0.0-beta3/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>

user_106064000
Related