Lately, I was in a search for a jQuery range slider, jQuery UI’s slider widget was the first that I thought of.

It had all the features I needed: working as a single or range slider, default values and man/maxvalues. However, the smallest download size for it was still ~40kb. Too much for a slider.

Tried many others, they were good but almost each of them was missing a feature I needed (that you may not need).

And I found noUiSlider. It had all the things I was looking for and with a size of 2.7kb.

There is support for single or double handles, custom starting values, vertical/horizontal orientation and the ability to get /set values.

Also, it works on touch devices and can be customized with CSS completely. Just a perfect widget for any UI.

HTML form elements look and behave slightly (or sometimes more) different in each browser.

In order to find out the differences and test them easily, there is a website: Native Form Elements.

The website does a simple thing, it lists all the form elements (including HTML5 elements) and their disabled states.

So, to compare, opening the site in different browsers is enough.

CSS3 provides us lots of styling options to create good-looking form elements.

Fancy Input, a jQuery plugin, doesn’t focus on the styling part but makes the fields attractive (and fun-to-use) by adding CSS3-powered effects.

The plugin hides the input field, places a span element containing the character pressed and applies CSS3 transitions to each element (letter).

There are multiple built-in effects and it works with both input + textarea fields.

Spectrum is a jQuery colorpicker plugin that probably comes with all the features you are looking for.

It is image-free (only CSS and JS) and can be used for all browsers or only as a polyfill for the input[type=color] of HTML5 .

The picker is actually familiar to designers/developers as it is the same one that comes with WebKit DevTools (created by the same developer) but now available as a jQuery plugin.

It has support for color palettes by storing/displaying the colors you chose, the default selected color can be set or it can be configured to only display the palette with pre-defined colors.

Alpha transparency selection is available, can be always visible (without clicking to a picker icon) and supports multiple color formats.

Spectrum can be customized with CSS and it works on mobile as well.

Twitter has open sourced a very nice project named Typeahead.js for building smart auto-complete form fields.

It comes as a jQuery plugin, shows suggestion as-users-type and can feature top suggestions with the help of styling.

The plugin can work with both local or remote datasets and it is optimized for speed as it can prefetch the dataset, store it on the client-side and run the queries quickly.

Typeahead.js simply converts any textfield into an auto-complete field, accepts JSON as the data source and has various settings for optimizing remote requests (rate limiting, maxConcurrentRequests, etc.).

Dropzone.js is a JavaScript library that simplifies creating a drag ‘n’ drop file upload functionality.

It works with jQuery and works almost out-of-the-box by giving a special class name to any form.

Multiple files can be uploaded at the same time where previews of images can be displayed as well.

There are also options for defining the max file size, thumbnail dimensions (if they will be generated), enable/disable previews and more.

And many events exist for interacting with the drag-drop and upload status.

Parsley is a JavaScript library, that can work with both jQuery or Zepto, for validating forms so easily.

It is built with UX concerns in mind and tries to simplify details for the user.

There are most of the frequently-used validation rules built-in like e-mail, required, min/max or “equals”.

Also, there is support for “remote validations” which can send Ajax requests and validate the data according to the response returned (like checking usernames/e-mails from the database when registering users).

Parsley works with HTML5 data attributes so you actually never write JavaScript with it, everything is inline.

The messages to be displayed, styles and functionality can be almost fully customized.

And, it is lightweight in size + well-documented with demos.

Range sliders are very useful UI elements when it comes to selecting min-max values.

jQRangeSlider is a jQuery and jQuery UI-powered slider plugin that has support for both numerical values and date/time.

It works within a given range of values and can be set to use custom steps (like 10-by-10 or week-by-week).

The plugin works well on touch devices (accept mouse wheels too), can be themed with CSS (there are 2 built-in themes) and provides callbacks for each change in values for interacting easily.

Everyone has a method for handling forms but it usually gets complicated when there are file uploads in that form.

Fine Uploader is a plug 'n' play script that ease file uploads and improve usability with the Ajaxed interface.

The script was known as valums-file-uploader (was featured at WRD) and deserves a 2nd shot with the improvements it had.

It only requires us to insert a CSS + JavaScript file and the rest is taken care of on the server-side with your favorite scripting language. No worries, ASP.NET, ColdFusion, Java, Node.js, Perl, PHP, Python implementations are offered in the download package.

Uploader can be the standard "file input" or it has support for drag 'n' drop uploads as well.

Also, there are options to limit the file size, file types, number of files and more.

There are various form validation plugins for jQuery and very good ones exist between them.

Many of them have lots of features and, if you are looking for a simplistic one, Happy.js can be a good alternative.

The plugin is lightweight and supports few input validations by default (required, date, number, e-mail, min/max and phone number). But it can be extended so easily by adding few lines and the regex for the rule you want.

Its styling in case of an error is smartly thought. Any non-validated elements get a custom class. Also, a <span> element is added for each non-validated item so that an error text can be displayed.

And, Happy.js works with Zepto.js as well.