Advanced Form Elements

  1. Home
  2. Forms
  3. Advanced Form Elements
Knob input http://anthonyterrien.com/knob/

Knob - Dial

Easily create knob input style.

Simple knob example

Dynamic knob example

Chosen select http://harvesthq.github.io/chosen/

With chosen select uesr can fase chose from large in select input.

Range Slider https://github.com/IonDen/ion.rangeSlider

Sliders

Are perfect for range select option.

Example of: Set diapason from 0 to 5000, Adding postfix "+" to max value, Set slider type to double, Dollar symbol as prefix, Enable grid
Example of: Set diapason from 0 to 10, Set fractional step value: 0.1, Enable grid
Example of: Set diapason from -50 to +50, Set FROM value to 0, Add degree symbol as postfix
Example of:Change common slider numbers to custom (Month names). Using values array for that. Array can be any length, Slider will change min and max number automaticaly to fit values array length, Step parameter also will be changed to one, to allow to choose items in values array
Range Slider http://refreshless.com/nouislider/

Range Slider

Simple and clean range select slider.

Basic example

Range select example

Data Picker https://github.com/eternicode/bootstrap-datepicker

Data picker

Simple and easy select a time for a text input using your mouse.

to
Switcher http://abpetkov.github.io/switchery/

Switcher

Is iOS 7 style switches for your checkboxes.



Color picker http://mjolnic.github.io/bootstrap-colorpicker/

Colorpicker

Colorpicker plugin for the Twitter Bootstrap toolkit.

As normal input
As a link
Change background color
Input Mask http://jasny.github.io/bootstrap/

Input Mask

Input masks allows a user to more easily enter data where you would like them to enter the data in a certain format.

999-99-999-9999-9
999 99 999 9999 9
999/99/999/9999/9
192.168.100.200
99-9999999
(999) 999-9999
$ 999,999,999.99
dd/mm/yyyy
Image cropper http://fengyuanchen.github.io/cropper/

A simple jQuery image cropping plugin.

Preview image

Comon method

You can upload new image to crop container and easy download new cropped image.

Other method

You may set cropper options with $({image}).cropper(options)

10GB of 250GB Free.
Copyright Example Company © 2014-2015