是否可以创建用于颜色选择的jQuery移动范围滑块，包括标签，步边框和步进背景？

Question

jQuery Mobile＆＃39;} rangeslider widget允许用户选择上限和下限;它基本上是两个<input type='range'/>元素，已经被强化了＃34;显示为带有两个＆＃34;拇指的单个滑块＆＃34;或＆＃34;处理。＆＃34;

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

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

有几个UI提示使用户可以直观地选择此选项：

1. 轨道（或＆＃34;滑杆＆＃34;）本身对于每个离散步骤具有不同的颜色。在我链接的示例中，它们实际上使用渐变背景，这也很好，但对于我的应用程序，我不介意每个步骤是纯色。
2. 每个离散步骤下面都有一个标签，表示颜色的名称。
3. 每一步都有明显的边界。

我一直在尝试使用jQuery Mobile的rangelider，并且尚未想出一种方法可以重现这些UI提示之一。有一个＆＃34;主题＆＃34;和＆＃34; trackTheme＆＃34;设置，但不允许您标记或着色滑块的各个步骤。

是否可以使用jQuery Mobile的rangelider进行此操作？

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