javascript - 是否可以为颜色选择创建一个 jQuery 移动范围 slider ，带有标签、阶梯边框和阶梯背景？

Question

jQuery Mobile 的 rangeslider widget允许用户选择上限和下限；它本质上是两个 <input type='range'/>已“增强”为带有两个“拇指”或“ handle ”的单个 slider 的元素。

这非常适用于简单的数字范围(例如，最低和最高价格)，但我想使用它来允许用户选择颜色范围。将颜色映射到数字不是很直观，我想提供一些 UI 提示来帮助用户。在做一些研究时，我发现了一些非常像我想要的东西，here .

您可以看到，用户可以通过设置可接受的最浅蓝色阴影和可接受的最深蓝色阴影来选择他们感兴趣的蓝色范围。

有几个 UI 提示可以让用户直观地选择:

1. 轨道(或“ slider ”)本身对于每个离散步骤都有不同的颜色。在我链接到的示例中，他们实际上使用了渐变背景，这也很好，但对于我的应用程序，我不介意每一步都是纯色。
2. 每个离散步骤下方都有一个标签，指示颜色的名称。
3. 每一步都有明显的边界。

我一直在试验 jQuery Mobile 的 rangeslider，但还没有想出一种方法来重现这些 UI 提示中的任何一个。有一个“主题”和“trackTheme”设置，但都不允许您标记或着色 slider 的各个步骤。

是否可以使用 jQuery Mobile 的 rangeslider 来做到这一点？

Answer 1

尝试

html

<div id="results"></div>
<div data-role="rangeslider">
    <label for="range-1a">color slider (<i>blue</i>): <span></span></label> 
    <input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" />
    <label for="range-1b">Rangeslider:</label>
    <input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range" />
</div>

js

$(function () {
    $("#results").css({
        "display" : "block",
        "width" : "99%",
        "height" : "50px",
        "border" : "1px solid gold"
    });
    $("[data-role='rangeslider'] a")
        .filter(":last")
        .css("display", "none")
        .addBack()
        .filter(":first")
        .css({
        "border": "1px solid blue",
        "background": "gold"
    }).attr("tabindex", 1).focus();
    $("input[name='range-1a']").on("change", function (e) {
        $("#results").css("backgroundColor", "hsla(240," 
                          + $(this).val() + "%," 
                          + $(this).val() + "%," 
                          + "1)");
        $("span").text($("#results").css("background-color"));
    });
});

jsfiddle http://jsfiddle.net/guest271314/f87qB/

另见

http://css-tricks.com/yay-for-hsla/

https://yuilibrary.com/yui/docs/color/hsl-picker.html