Tuesday, July 8, 2008

Jquery Photoshop Like Slider Plugin

Photoshop CS3 has introduced a very intuitive way to let users adjust fine tune required settings by just clicking on labels and dragging. Photoshop Like Slider plugin will bring that functionality to your html forms.

To try, just click on the label saying Factor on above form and drag towards to right or left to easily adjust factor of pixel ratio.**

Above demonstration shows you one of the photoshop settings window brought to you as an html form and how photoshop users easily fine tune setting values by a handy photoshop slider . Now you can add this functionality to every form area that has to be adjusted numerically. Not just text input areas but also select tags support the usage of this plugin and sliders.

It is customizable, too. You can explicitly specify pixel intervals at which changes will occur, decrement and increment amounts (both integer and float values are valid), down limits and up limits for each form area that you called plugin method from.

To get the plugin click on the download button. See documentation page for more usage information and examples.

**This plugin isn't in final stage but in preview. Currently working on Firefox, Flock and Safari. Although I have struggled to make the plugin work on Opera and Internet Explorer they resisted to work. There should be a library based problem. I am searching on it. Anyway, if you are viewing the page on Opera or Internet Explorer you need to switch to FireFox, Safari or Flock to be able to see how the plugin works. Best viewed on Safari and Flock.


  1. Doesn't work here... looks like the preview is bad

  2. Works for me, just not very intuitive. I think vertical makes more sense and maybe have it work on the label and the textbox.

  3. You must be talking about Flash CS3 vertical adjustmnent sliders. I could add them to plugin if asked more.

    For the first commentator: on which os and browser you tried the plugin?