CODEWITHSUNDEEP
javascriptjqueryhtmlcolors
afrotaint
afrotaint

Reputation: 296

Snapchat-like jquery color picker

I'm interested in creating a color picker like the one found in iOS Snapchat. It's a very nice slim vertical bar, which I'd like to be horizontal, seen here.

I've been using individual boxes like this, but would much rather have a slider/gradient like Snapchat's:

js:

    $(function() {
    $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#000', '#fff'], function() {
        $('#tools').append("<a href='#colored_sketch' data-color='" + this + "' style='border: 1px solid black; width: 30px; height: 30px; background: " + this + "; display: inline-block;'></a> ");
    });

html:

        <div id='tools'></div>

Every example color picker I've seen is a recreation of Adobe's color chooser, which is way too big for my work area and I haven't found something small enough with a sliding gradient like Snapchats. Any help in recreating it much appreciated, thank you!

Upvotes: 1

Views: 841

Answers (1)

Prinzhorn
Prinzhorn

Reputation: 22518

Use a slider (e.g. jQuery UI) and then the color simply is hsl(slider * 360, 100%, 50%) (assuming the slider returns values from [0,1]).

If you need to you can then convert this back to rgb.

http://jsbin.com/utumab/1/edit

It's vertical (didn't read you want it horizontal). But it's trivial to change.

Upvotes: 2

Related Questions