## Advanced Form Elements

##### Knob input http://anthonyterrien.com/knob/

### Knob - Dial

Easily create knob input style.

Simple knob example
Dynamic knob example

##### 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.
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

##### TouchSpin http://www.virtuosoft.eu/code/bootstrap-touchspin/

A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

Basic example with empty value

Example with postfix

Example with vertical button alignment:

##### Dual Listbox

Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.

##### Select2 https://select2.github.io/

Select2 is a jQuery based replacement for select boxes. It can take a regular select box and turn it into:

A placeholder value can be defined and will be displayed until a selection is made.

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.

##### 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.

Simple data input format
One Year view
Decade view
Month select
Range select
to

##### ClockPicker http://weareoutman.github.io/clockpicker/

### ClockPicker

A clock-style timepicker for Bootstrap (or jQuery).

##### Date Range Picker http://www.daterangepicker.com/

### Date Range Picker

A JavaScript widget for choosing date ranges. Designed to work with the Bootstrap CSS framework.

#### All options example

##### 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

##### Bootstrap Tags Input

jQuery plugin providing a Twitter Bootstrap user interface for managing tags

Basic example with few initial tags

##### 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.

ISBN 1
999-99-999-9999-9
ISBN 2
999 99 999 9999 9
ISBN 3
999/99/999/9999/9
IPV4
192.168.100.200
Tax ID
99-9999999
Phone
(999) 999-9999
Currency
$ 999,999,999.99
Date
dd/mm/yyyy

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

### Switcher

Is iOS 7 style switches for your checkboxes.

##### Custom switch

Pure CSS3 On/Off flipswitches with animated transitions.

##### 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.

Upload image
Download

#### Other method

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

##### Awesome bootstrap checkbox

#### Checkboxes

Basic

Supports bootstrap theme colors: `.abc-checkbox-primary`, `.abc-checkbox-info` etc.

Default
Primary
Success
Info
Warning
Check me out
Circled

`.abc-checkbox-circle` for roundness.

Simply Rounded
Me too
Disabled

Disabled state also supported.

Can't check this
This too
And this
Without label text
Indeterminate state
Inline checkboxes
One
Two
Three

#### Radios

Basic

Supports bootstrap theme colors: `.abc-radio-primary`, `.abc-radio-danger` etc.

Small
Big
Next
One
Disabled

Disabled state also supported.

Next
One
As Checkboxes

Radios can be made to look like checkboxes.

Default
Success
Danger
Without label text
Inline radios
Inline One
Inline Two