Is it possible to create a jQuery mobile range slider for color selection, with labels, step borders, and step backgrounds?

Question

jQuery Mobile's rangeslider widget allows the user to select an upper and lower bound; it is essentially two <input type='range'/> elements that have been "enhanced" to appear as a single slider with two "thumbs" or "handles."

This works great for simple numeric ranges (eg, a min and max price), but I'd like to use this to allow a user to select a color range. Mapping colors to numbers is not quite intuitive, and I'd like to provide some UI cues to help the user out. In doing some research I found something very much like I want, here .

You can see that user can select what range of blue they are interested in by setting the lightest acceptable shade, and the darkest acceptable shade of blue.

There are several UI cues that makes this selection intuitive for the user:

1. The track (or "slider bar") itself is has a different color for each discrete step. In the sample I linked to, they actually use a gradient background, which is also fine, but for my application I don't mind if each step is a solid color.
2. There is a label below each discrete step indicating the name of the color.
3. Each step has a distinct border.

I've been experimenting with jQuery Mobile's rangeslider and have yet to come up with a method that can reproduce even one of these UI cues. There is a "theme" and "trackTheme" setting, but neither allows you to label or color the individual steps of your slider.

Is it possible to do this with jQuery Mobile's rangeslider?

Answer 1

Try

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/

See, also

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

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