CODEWITHSUNDEEP
javascriptjquerycsscolor-picker
eni
eni

Reputation: 21

Create a Adobe gradient picker with jquery and javascript

I want to create an component like Adobe gradient picker in Javascript and jQuery. I want to use the jQuery gradients plugin. there is a div with 2 markers left and right. when I clicked in bound of div this automatically add a marker, and when I double click on this it open a jQuery color to select a color. Also the marker should be moving across the main div. Please help me with an example.

Upvotes: 2

Views: 1904

Answers (1)

jcubic
jcubic

Reputation: 66650

Check slider in JQuery UI http://jqueryui.com/demos/slider/ (you can modify code of widget to add multiply numbers of markers, changing style, and attach click handler on sliding element to open color picker), CSS3 Gradient http://css-tricks.com/examples/CSS3Gradient/ (you can manipulate css3 gradients with jquery), color picker plugin http://www.eyecon.ro/colorpicker/ or Farbtastic color picker — http://acko.net/dev/farbtastic

If you don't want to use JQuery UI widgets — and do this from scratch — you can create <div> with with position: relative; and inside it <span> with position: absolute; then in javascrtip/jquery add live event mousedown/mouseup/mousemove to handle moving when user drags the marker, and add click event to open color picker.

To handle adding new markers you need to add click event to div just add new span, you also need function that interpolates gradients from position in div, so when user click in center of black to white gradient it add grey marker (but you can also add default color for marker or copy the color from marker in the left or the right);

And you can pack it inside plugin and put it on the web.

Upvotes: 1

Related Questions