显示Bootstrap 4范围输入的值
Bootstrap 4 的范围输入（range input）通常用于允许用户在一定范围内选择数值。这个输入类型在 HTML5 中被引入，并且可以通过 Bootstrap 进行样式定制。
基础概念
范围输入是一种 HTML 输入元素，允许用户通过滑动条选择一个数值范围。在 HTML 中，它通过 <input type="range"> 来实现。
相关优势
- 用户友好：滑动条提供了一种直观的方式来选择数值，特别是当数值范围较大时。
- 节省空间：相比于输入框和按钮的组合，滑动条占用的空间更少。
- 易于定制：Bootstrap 提供了丰富的样式选项，可以轻松地定制滑动条的外观。
类型与应用场景
- 单滑动条：用于选择一个单一的数值。
- 双滑动条：用于选择一个数值范围。
应用场景包括但不限于：
- 音量控制
- 图片亮度调整
- 设置价格范围筛选
- 任何需要用户输入数值范围的场景
示例代码
以下是一个简单的 Bootstrap 4 范围输入示例，以及如何显示其值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Range Input</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<label for="rangeInput">选择数值:</label>
<input type="range" class="form-control-range" id="rangeInput" min="0" max="100" step="1">
<p>当前值: <span id="rangeValue">50</span></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#rangeInput').on('input', function() {
$('#rangeValue').text($(this).val());
});
});
</script>
</body>
</html>解释
- HTML部分：创建了一个范围输入框，并为其设置了一个初始值。
- JavaScript部分：使用 jQuery 监听滑动条的
input事件，每当用户调整滑动条时，都会更新显示当前值的<span>元素。
遇到的问题及解决方法
问题：滑动条的值没有实时更新显示。
原因：可能是因为没有正确绑定事件监听器，或者事件监听器没有正确触发。
解决方法：
- 确保引入了 jQuery 库。
- 确保在文档加载完成后绑定事件监听器。
- 检查事件名称是否正确（例如，使用
input而不是change，因为input事件会在值变化时立即触发）。
通过上述方法，可以确保滑动条的值能够实时且准确地显示给用户。
相关·内容
3回答
我想有一个范围输入的值显示在某处。在本Bootstrap教程中，没有显示该值：https://getbootstrap.com/docs/4.1/components/forms/#range-inputs <div class="/bootstrap.min.js" integrity="sha384-JjSmVg
浏览 56提问于2020-06-26得票数 3
回答已采纳
1回答
label> </div>
</form> 它是我从bootstrap4文档(https://getbootstrap.com/docs/4.1/components/forms/#range-inputs)中借用<em
浏览 10提问于2019-10-16得票数 1
回答已采纳
1回答
将高光设置为范围滑块
、、、
我使用bootstrap 4和angular 8。我想做这样的东西： ? 这是一个带有高亮显示的地段的范围滑块。我希望在开头有一个红色突出显示的扇区，在结尾有一个扇区，以表明有人选择了一个将是关键的值。这张图片来自https://seiyria.com/bootstrap-slider/的一个示例，如示例22所示。但有一
浏览 9提问于2020-01-30得票数 2
回答已采纳
1回答
我正在运行，它有一个内联日历和一个日期范围。下面的工作方式是突出显示前端按钮，但是输入没有显示值范围。注意，，我希望得到逗号分隔的年份，只有像2014, 2018，我们只能选择两年，最多作为一个范围。
/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css"
浏览 0提问于2018-06-28得票数 0
回答已采纳
1回答
我检查了范围滑块的引导带4文档，并在此回答，但无法找到一种方法，滑块显示值时，轨道被移动。
我看到像seiyria/bootstrap-sliderand这样的开源项目允许您这样做，但是当轨道被移动时，真的没有内置的方式(引导参数)来显示值吗？
浏览 2提问于2021-01-23得票数 0
回答已采纳
1回答
我只希望能够根据输入范围过滤图形输出。在本例中，如果范围输入设置为1-5，我希望在图形上看到5个点，同样，2-5的范围输入显示4个点。##UI shinyUI(fluidPage(),
sidebarPanelplot2")))))
浏览 0提问于2015-10-06得票数 5
回答已采纳
我有一个输入类型范围，它正在工作。如果拖动该值，则该值将显示在输入字段中。反之亦然吗？
$("input[type=range]").on("change input", fun
浏览 3提问于2021-05-22得票数 0
回答已采纳
7回答
我正尝试在一个有2个文本框的表单上显示年份范围输入。一个表示最小值，另一个表示最大值，并由破折号分隔。<form id="Form1" class="form-horizontal" role="form" runat="server">
<div
浏览 135提问于2014-12-13得票数 74
回答已采纳
如何使用angular ngx-bootstrap range日期选择器日历在两个不同的输入框中显示选定的开始日期和结束日期？
我正在使用angular 9和ngx-bootstrap日期范围日历
浏览 1提问于2020-04-26得票数 0
3回答
我正在使用Bootstrap3。我有一个按钮，可以在其中打开一个模式和日期范围选择输入框。当我单击输入框时，会打开日期范围日历。我可以选择日期范围，但不能更改日期。这看起来像是模式的z索引问题，而且不知何故不允许在文本字段中选择日期。我需要显示一个模式框，并显示与日期文本修改日期范围日历。
浏览 20提问于2017-02-10得票数 0
1回答
在ie和edge中使用此html，范围不会显示。/css/bootstrap.min.css"> <div class=&qu
浏览 0提问于2015-12-30得票数 4
回答已采纳
如何使用jquery范围代码在隐藏输入字段中显示范围值 grid: true, to: 6, "PostGraduate", "P.hd"});
<input type="range" id="range" value="" n
浏览 0提问于2016-05-21得票数 0
我需要匹配A到C的3行，在A4-I4中查找它们的值，并为未使用的单元格保留占位符X的J4。A1 B1 C1A3 B3 C3示例匹配第一行的3个关键字：如果三个都没有找到，那么应该返回0，如果所有三个都匹配仅匹配1个关键字的示例(未使用的单元格替
浏览 0提问于2015-09-15得票数 0
我只想将值的条目限制在指定的范围内。在指定范围之外输入的所有内容都应清除。Application.EnableEvents = False Application.EnableEvents = True不幸的是我的代码应该清除已粘贴在指定范围之外的所有内容。它只应粘贴适合于命名范围<em
浏览 0提问于2019-05-18得票数 2
回答已采纳
如何说服datetime选择器在初始页面加载时在输入文本字段中显示它的值？
在这种情况下，datepicker文本输入的值属性已经设置，但该字段显示为空。重新加载后，该值将按预期显示。
浏览 0提问于2016-06-10得票数 2
13回答
我一直在研究Bootstrap4- beta，但是当在.input-group中使用.is-invalid时，它似乎没有显示出来。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheetinvalid-feedback is-invalid">
浏览 162提问于2017-08-14得票数 33
回答已采纳
如何在excel中突出显示特定文本而不是完整文本？(不使用vba)我尝试了条件格式，但它突出显示了整个单元格，而不是单元格中的特定文本。
浏览 2提问于2016-12-05得票数 0
我在这里使用了bootstrap 4的bootstrap-validate：
<div class="form-group">2">2 Bedrooms</option> <option val
浏览 13提问于2019-07-24得票数 0
1回答
在'X‘分钟后突出显示单元格
、、、、
是否可以在x分钟后高亮显示一个单元格，但如果已将值输入到单元格中，它将不再高亮显示？这是不是可以用VBA或更简单的方式编写，比如条件格式？因此，在将->像元值输入到B4中后进行即时通信，输入，大约5分钟后，B5将突出显示一种颜色(可能是红色)，但一旦将值输入到B5中，突出显示将消失，并再次为单元格B6重新开始该时间，直到输入值</e
浏览 10提问于2020-07-08得票数 0
1回答
我有用户应该输入系统ID的输入域。用户输入系统ID后，应触发验证。如果系统ID有效，则向服务器发送ajax请求。如果系统ID无效，用户应该会看到该消息。我在这个项目中使用JQuery和Bootstrap 3.3.7。/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz
浏览 5提问于2019-07-19得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
