JavaScript范围滑块/双滑块存在不使用框架[关闭]

Posted 2023-02-22

【中文标题】JavaScript范围滑块/双滑块存在不使用框架[关闭]

【英文标题】：JavaScript range slider / dual slider exist withOUT using a framework [closed]

【发布时间】：2010-10-27 00:36:51

【问题描述】：

我正在寻找一个 javascript 控件，它是一个 Range Slider（双旋钮）：

不使用现有的 JS 框架（例如 dojo、jquery 等）-除非您可以滚动/创建自己的子框架，我可以在其中编译我需要的组件。 适用于所有主流浏览器

下面是 Range Slider 的示例，但当然这使用 JQuery - 所以这不是一个选项，因为即使我构建的 JQuery 只包含我需要的组件（JQuery UI 核心 + Slider），它也是 140kb MINIFIED：

http://jqueryui.com/demos/slider/#range

【问题讨论】：

为什么要求它不使用框架？ “适用于所有主流浏览器”是框架存在的主要原因。

@Ben Blank - 我来自思想流派，您不应该要求用户下载他们不会使用的代码。如果我使用 JS 框架，大概 90% 的框架都会被闲置。因此，如果 JS 框架可用于“滚动/创建”您自己的子框架，其中它只包含所需的确切组件 - 那将起作用

@Hank892 这个逻辑的问题，没有错，但在这种情况下，您要问的是 JS 中的复杂 UI 功能，这需要大量的基础工作让它正常工作。因此，除非您为这种特定情况滚动自己的 JS，否则可以保证您有额外的 JS。

我今天偶然发现了这个远程滑块。我没有使用它，但看起来他们非常关注可访问性，这对你来说可能很重要，也可能不重要。不过，似乎工作得很好。 paciellogroup.com/blog/misc/samples/aria/slider/…

2 年后，这似乎是一个不错的候选人：refreshless.com/nouislider

【参考方案1】：

YUI 3（目前处于预览版）只引入了执行您所要求的绝对最少的代码量。他们的基本滑块示例 (http://yuilibrary.com/yui/docs/slider/slider-basic.html) 只引入了 24k 的 JavaScript 和不到 1k 的 CSS。挺好看的。

披露：我为 Yahoo! 工作。

【讨论】：

@Potch 这很漂亮。但是，YUI 3 是否支持双手柄滑块？您的链接似乎仅适用于单个手柄滑块。

【参考方案2】：

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

【参考方案3】：

jQuery UI 有一个不错的：

http://jqueryui.com/demos/slider/

【讨论】：

你没有深入挖掘。 :) 它也是一个多滑块jqueryui.com/demos/slider/#range。这些都是非常复杂的，所以你会发现找到一个不利用当前框架的是有问题的。 Yahoo 有一个，ExtJS 有一个，jQuery 有一个，但它们都是建立在每个 JS 框架中的核心 UX 框架之上的。

你可以试试雅虎或ExtJS，它们的权重相同或更多。如果您担心大小，只需确保它已正确缓存，因此他们只需下载一次。使用您自己的 CDN 或 Google 的 code.google.com/apis/ajaxlibs/documentation 确保一切正常。

您的 Javascript 不必阻止 HTML 呈现。您可以简单地将脚本标签放在页面底部，直到那时它才会尝试加载它们。滑块在页面上的任何位置都可以被禁用，直到 Javascript 加载。这是 2009 年，75kb 你想要的还不错。

@Hank892 — 我不得不说，这听起来有点像过早的优化。不仅 75k 真的太少不用担心（大多数页面的图像是这个数字的几倍），而且如果您使用主要的 CDN（或 Google API），用户甚至不必下载 75k；他们几乎可以保证已经缓存了一个副本。

jQuery UI 允许您配置代码。 jqueryui.com/download 你给自己一个愚蠢的错误约束，特别是如果你使用 Google API 或 CDN。它们的流行意味着您的用户已经在其他地方下载了代码。那么为什么不使用它呢？滚动您自己的代码只需要用户在已有的基础上下载更多代码。