0

I am interested in using a jQuery slider for an input on my HTML form.

In certain examples, I see it invoked as an input like so:

<input type="range" name="slider" id="slider-0" value="25" min="0" max="100"  />

However in other examples, I see it invoked like this:

<head>
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
  • What is the functional difference between these two snippets? Does one grant greater customization than the other (e.g. can I customize the background of the slider using the first code)?
  • If I want to use the second one in a form, do I need a ``hidden field"?
4

2 回答 2

1

<input type="range"/>是一种 HTML5 输入类型，因此它只会被现代浏览器支持（有关支持的浏览器列表，请参阅此链接）。在较旧的浏览器上，范围输入将显示为文本输入。可以在此处的 MDN 文档中找到有关范围类型的更多信息

如果您需要支持较旧的浏览器（例如 IE 9 或更低版本，您可能会支持），您将需要使用 jQuery UI 的滑块或其他库。这些库使用 javascript 创建滑块，但与原生 HTMLrange滑块不同。

您可以在此处找到 jQuery UI 滑块的文档。

于 2013-05-28T14:58:01.067 回答
0

你不需要javascript代码。存在不同的方法来实现这一点。

首先 <input type="range"....................>你只需要 jquery livrarias 然后这个工作。

jquery 库（最旧版本）：

http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css
http://code.jquery.com/jquery-1.9.0.min.js
http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js

您也可以自定义滑块。jquery.mobile-1.3.1.min.css 有一个样式，如果你想改变，基本上在你的样式表上选择：

input[type=range]{background-color:black}

等等..

希望你明白这一点。在我看来，使用 jquery 库实现输入类型

于 2013-05-28T14:40:25.017 回答