具有两个不同值的输入范围

Question

我想知道它是否已经存在一种方法来输入具有两个不同可设置值的“范围”类型的输入。我想要实现的输入类似于this。这个想法是为价格设定一个范围。这意味着我需要从该输入中检索“最小值”和“最大值”。显然，为了学习，我们可以忽略 CSS 样式。

有没有办法用 HTML5 或 JavaScript 来实现？我听说有一些 jQuery 插件可以做到这一点，但我想知道是否有更“原生”的方式来做到这一点。另外，我正在使用面向移动设备的框架 Ionic。如果有人知道可以实现此目的的 Ionic 插件，将不胜感激。

Answer 1

您可以使用noUiSlider。它包括所有必需的 Javascript、CSS 和 HTML。

在你的 HTML 中有一个这样的 div：

<div id="slider"></div>

然后使用这个：

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

你可以看到一个简单的例子。