如何使用 jQuery 滑块显示文本值？
Posted
技术标签:
【中文标题】如何使用 jQuery 滑块显示文本值？【英文标题】：How to display text values with jQuery slider? 【发布时间】：2019-08-08 01:17:49 【问题描述】：我的目标是有一个滑块，滑动会改变信息文本。
不幸的是，jQuery 移动文档只显示数值：http://demos.jquerymobile.com/1.4.5/slider/
目前我正在使用选择字段：
<select name="condition" id="filter_condition">
<option value="18">Average</option>
<option value="13">Good</option>
<option value="277">Bad</option>
</select>
在本例中，这些值不是 1-3，也不是按顺序排列的。
我想显示一个滑块，而不是显示选择字段，其中 bad 位于左侧，good 位于右侧。
jQuery 移动版可以做到这一点吗？我只找到了带有数值的示例。
【问题讨论】：
【参考方案1】：无法完全理解为什么您的值不应排序，但无论如何，这是我的建议。
如果这不是您所期望的，请随时更新您的问题并提供更多详细信息。
在您的示例中，您只需要创建与您的选项相对应的三个滑块扇区，显然，与这些选项的关系。使用cases[val].value 过滤掉您需要的内容。 input.change 事件是你的朋友。
$(document).on("pagecreate", "#page-one", function()
var cases = [value:277, label:"bad",value:18, label:"average",value:13, label:"good"];
$(".full-width-slider input").on("change", function()
var val = ($(this).val()/100)|0;
$(".full-width-slider h3").text(cases[val].label);
);
);/* Hide the number input */
.full-width-slider input
display: none !important;
.full-width-slider .ui-slider-track
margin-left: 15px;
.full-width-slider h3
text-align: center;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-one" data-role="page">
<div role="main" class="ui-content">
<div class="full-width-slider">
<h3 class="ui-bar ui-bar-a ui-corner-all">bad</h3>
<input type="range" min="0" max="299" value="0" autocomplete="off" />
</div>
</div>
</div>
</body>
</html>这是另一个关于 slider 事件的示例：https://***.com/a/44519349/4845566
【讨论】：
谢谢，看起来很棒。我正在尝试实现，但值没有改变，并且在移动滑块时出现此错误：“[干预] 由于目标被视为被动，因此无法在被动事件侦听器中阻止默认值。” 错误不断出现，但值现在发生了变化。不知何故，我也无法添加更多值：值：7，标签：“非常好”，值：1，标签：“未使用”。仍然只有 3 处更改。 好的，知道了 :-) 谢谢。关于干预的错误一定是我的代码中的其他内容。 @merlin 您提到的错误是众所周知的，将touch-action: none; 应用于容器。 ***.com/a/50594338/4845566
太棒了！谢谢你，你的帮助很有用。以上是关于如何使用 jQuery 滑块显示文本值？的主要内容，如果未能解决你的问题，请参考以下文章