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

Posted 2023-05-08

【中文标题】如何显示一个引导范围以及如何在输入字段中显示值？

【英文标题】：How to display a bootstrap range from the one and how to show the value in the input field?

【发布时间】：2021-08-05 13:48:40

【问题描述】：

我正在使用 bootstrap 5 range 。我遇到了一些问题

为什么点显示在行的中心？我添加了最小值 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>

【参考方案1】：

您需要使用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>

【讨论】：

非常感谢您的帮助。是的，它正在工作。关于颜色让我暂时保持不变。