css 如何显示一个引导范围,以及如何在输入字段中显示值?

osh3o9ms  于 2023-06-07  发布在  其他
关注(0)|答案(2)|浏览(138)

我用的是bootstrap 5 range我有点问题
1.为什么点显示在线的中心?我添加了最小值1
1.如何在输入字段中显示范围的值?
1.如何改变线条的背景色或线性渐变?

.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>
06odsfpq

06odsfpq1#

您需要使用value="1"1初始化您的拇指。然后,在范围输入上写入更改事件,并使用$(this).val()将值分配给其他输入。我不确定第三个问题,因为在那个文档中写的是supports "filling" their track.., we do not currently support it...

演示代码

$("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>
jhkqcmku

jhkqcmku2#

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 = "yrs.";
    if (parseInt(slider.value) < 10) {
      _yrsTxt = "yr.";
    }
    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 = "yrs.";
      if (parseInt(this.value) < 10) {
        _yrsTxt = "yr.";
      }
      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 yr.</span>
    <span class="max-amount f-16 font-weight-normal darkGray-color text-right mt-1">20 yrs.</span>
  </div>
</div>

相关问题