jQuery UI color picker issue

Question

I want to create a color picker, but it needs to be horizontal like this http://jqueryui.com/demos/slider/ It needs to be a horizontal slider that can scroll through all colors. I am trying to base it off the jquery ui slider.

Does anyone know any examples of this from the web? Or could tell me how to do this?

I was thinking based on the distance the slider is set say 50% i would need to convert that value into a color value.

Something like 0% distance is white and 100% is black.

Note: it needs to be 1 slider that can range through all colours, and the colors has to be smooth transition not all randomed.

Like this image: but it somehow needs to incorporate white and black in it.

Answer 1

You can represent HTML colors as hex values. With this in mind, we can create a slider that goes from #000000 to #FFFFFF (or 0 to 16777215 in decimal):

$("#slider").slider({
    min: 0,
    max: 16777215,
    slide: function (event, ui) {
        var hex = "#" + ui.value.toString(16);
        $("#color").css("background-color", hex);
    }
});

Note that for this to be remotely usable, you would have to have a pretty long slider. To get a better sense of it working, use the keyboard arrows instead of the mouse to slide through colors.

Example: http://jsfiddle.net/4extL/46/

Answer 2

There are a lot of jQuery UI examples here for color pickers. They even have examples where you can scroll through all the colors. Hope this helps.

Answer 3

I don't think this is possible. I would recommend using one of the many jQuery colorpicker plugins. Or you could look at this jQuery UI example - not exactly what you wanted but it does use the jQueryUI slider: http://jqueryui.com/demos/slider/#colorpicker