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

Question

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

有没有办法用 HTML5 或 JavaScript 来完成这个？我听说有一些 jQuery 插件可以做到这一点，但我想知道是否有更多 "native" 的方法来做到这一点。另外，我正在使用面向移动的框架 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
    }
});

您可以看到一个简单的工作示例。

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

Input range with two different values

html

input

range

minimum

ionic