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

jQuery mobile user allows the user to select upper and lower bounds; It is essentially two & lt; for "enhanced" elements to appear as a single slider with two "thumbs" or "handle". Input type = 'range' / & gt; The elements are elements.

This works very well for ordinary numerical ranges (eg, one minute and maximum price), but I want to use it so that the user can choose a color range. Mapping color is not quite easy for numbers, and I want to provide some UI signals to help the user. I liked a lot like doing some research as I would like.

< / P>

You can see that the user can be interested in the type of blue color by establishing the fastest acceptable shadow, and the lowest acceptable shade of blue.

There are several UI indications that make this selection comfortable for the user:

1. The track (or "slider bar") has a different color for each discrete step is. They are connected to the sample, they actually use a gradient background, which is fine, but for my application I have no problem that each stage is a solid color.
2. Below each discrete is a label

I am experimenting with the jQuery mobile range slider and yet one of these UI signals One can also reproduce. There is a "theme" and "tracktheme" setting, but neither do you allow the different steps in your slider to label or color.

Is it possible to do this with jQuery Mobile Range Slider?

Try

html

  Lt; Div id = "result" & gt; & Lt; / Div & gt; & Lt; Div data-role = "ranges slider" & gt; & Lt; Label for = "range-1a" & gt; Color slider (& lt; i & gt; blue & lt; / i & gt;): & lt; Span & gt; & Lt; / Span & gt; & Lt; / Label & gt; & Lt; Input name = "range-1a" id = "range-1a" min = "0" max = "100" value = "0" type = "range" /> & Lt; Label for = "range-1b" & gt; Color slider: & lt; / Label & gt; & Lt; Input name = "range-1b" id = "range-1b" min = "0" max = "100" value = "100" type = "range" /> & Lt; / Div & gt; CSS ({"Display": "Block", "Width")  

js

  $ (function () {$ ("# result"). : $ ("[Data-role = 'rangeslider'] a) .filter (": last "):" 99% "," height ":" 50px "," border ":" 1px solid gold "}; CSS ("Display", "none") .addBack (.filter (": first"). CSS ({"border": "1px solid blue", "background": "gold"}). (" Css ("background color", "1"), focus (); $ ("input [name = 'category-1a']," tabindex "(" change ", function (e) {$ (" # result ") ] ")." HSLA (240, "+ $ (this) .val () +"%, "+ $ (this) .val () +"%, "+" 1) "); $ ( "Span"). Text ($ ("# result"). CSS ("background-color");});});  

jsfiddle

See,