不使用框架存在的范围滑块/双滑块

Question

我正在寻找一个JavaScript控件，它是一个范围滑块（双旋钮），要求如下：

• 不使用现有的JS框架（例如dojo、jQuery等）- 除非你能够滚动/创建自己的子框架，在其中只编译我需要的组件。
• 在所有主流浏览器中运行

下面是一个范围滑块的示例，但当然这个示例使用了jQuery - 因此这不是一个选项，因为即使我只构建包括我需要的组件（jQuery UI核心+滑块），它也有最小的140kb。 http://jqueryui.com/demos/slider/#range

- Hank892

---

为什么要求不使用框架？“在所有主流浏览器中运行”是框架存在的主要原因。 - Ben Blank

我今天刚刚偶然发现了这个范围滑块。我没有使用过它，但是它似乎非常注重无障碍性，这可能对您很重要，也可能不重要。不过看起来它的功能相当不错。http://www.paciellogroup.com/blog/misc/samples/aria/slider/doubleslider.html - mikefrey

两年后，这似乎是一个不错的选择：http://refreshless.com/nouislider/ - jrochkind

Freyday所指的网页不幸已经不存在了，但是仍然可以在http://files.paciellogroup.com/blogmisc/samples/aria/slider/tpgSlider_source.zip下载到源代码（附有示例）。 - redburn

我已经完全使用CSS（超轻量级！）创建了一个多范围滑块。 - vsync

Answer 1

jQuery UI有一个很好的例子： http://jqueryui.com/demos/slider/

- Nick Berardi

---

你没有深入挖掘。 :) 这是一个多滑块，http://jqueryui.com/demos/slider/#range，也是非常复杂的，所以你会发现很难找到一个不利用当前框架的滑块。雅虎有一个，ExtJS 有一个，jQuery 有一个，但它们都是基于每个 JS 框架的核心 UX 框架构建的。 - Nick Berardi

您可以尝试使用重量相同甚至更大的Yahoo或ExtJS。如果您担心大小问题，只需确保正确缓存，这样他们只需要下载一次即可。使用您自己的CDN或谷歌的http://code.google.com/apis/ajaxlibs/documentation/来确保所有内容都正常传输。 - Nick Berardi

您的JavaScript不必阻塞HTML渲染。您只需将脚本标签放在页面底部，它们就不会在此之前尝试加载。页面上滑块所在的位置只需要在JavaScript加载之前禁用即可。这是2009年，对于您想要的内容来说，75kb并不算太大。 - Paolo Bergantino

@Hank892 — 我不得不说，这听起来有点像过早优化。不仅75k实际上太少了以至于无需担心（大多数页面的图像都比它大几倍），而且如果您使用主要的CDN（或Google APIs），用户甚至不需要下载这75k；他们几乎保证已经缓存了一份拷贝。 - Ben Blank

jQuery UI允许你配置代码。http://jqueryui.com/download 如果你使用Google API或CDN，这种想法就是一个可笑的错误限制。它们的普及意味着你的用户已经从其他地方下载了代码。那么为什么不使用它呢？自己开发只会要求用户在他们已经拥有的代码之上再下载更多的代码。 - Mark Hurd

Answer 2

YUI 3（目前处于预览版）只会拉取完成所需的绝对最少量代码。他们的基本滑块示例（{{link1：http://yuilibrary.com/yui/docs/slider/slider-basic.html}}）只需拉取24k的JavaScript和不到1k的CSS。非常流畅。

披露：我在雅虎工作。

- Potch

---

@Potch 非常漂亮。但是，YUI 3是否支持双手柄滑块？您的链接似乎只适用于单手柄滑块。 - TeddyR

Answer 3

使用http://www.walterzorn.com/dragdrop/dragdrop_e.htm#addons中的滑块代码。它只有一个手柄，但底层的drag-drop.js非常灵活。您只需要添加自己的第二个滑块，并根据另一个滑块的位置编程锁定每个条的最小-最大范围。您需要包含一个1 12kb（lgpl'ed）脚本和大约10-20行代码来实现此功能。

- SpliFF