polyfill html_对双手柄HTML5滑块的多范围Polyfill支持

新HTML5范围输入非常适合数量和日期之类的动态选择。 但是默认范围滑块不支持多个手柄 。

输入Multirange ，这是一个polyfill，旨在支持多个可以正常运行并支持所有主要浏览器的句柄 。

这是一个免费工具 ，它提供了原生添加多个句柄的最佳方法，而无需使用插件。 该polyfill有两个资源 ： JS文件和CSS文件 。 它们都适用于范围输入 ，您可以从GitHub主仓库中 下载它们 。

请注意，这意味着您需要使用默认情况下已经支持范围输入的浏览器。 它还需要 并非所有浏览器都支持的 CSS变量 。

值得庆幸的是，Multirange 使用了CSS后备功能 ，其中使用了两个范围滑块，而不是一个。 这不是一个完美的解决方案，但它仍然提供了可用的界面。 从好的方面来说，它可以直接使用而无需附加任何字符串。

只要将文件添加到您的站点 ，您就可以在滑块字段上使用multiple属性 。 您也可以使用逗号设置输入值的范围 。

这是使用“多范围”滑块HTML的简短摘要：

<input type="range" multiple value="10,80" />

手柄可以相互拖动甚至相互 叠放 。 并且范围输入仍然支持键盘导航 ，这对于辅助功能非常有用 。

所有演示和源代码示例都可以在“ 多范围” 网页上找到 ，因此，如果您正在寻找多范围HTML滑块 ，请查看一下。

翻译自: https://www.hongkiat.com/blog/html5-slider-polyfill/