INSPINIA | Advanced Form Elements

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.

Basic example

Select

Multi select

India
Peru

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

$0$5000+01250250037505000

Example of: Set diapason from 0 to 10, Set fractional step value: 0.1, Enable grid

10 carats0 carats02.557.510

Example of: Set diapason from -50 to +50, Set FROM value to 0, Add degree symbol as postfix

-50°50°0°-50-2502550

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

DecemberJanuary

Read about API

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:

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

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.

Minimal example

The Date Range Picker is attached to a text input. It will use the current value of the input to initialize, and update the input if new dates are chosen.

All options example

May 8, 2025 - June 6, 2025

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.

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 new image Download

Other method

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

	Jan 2015
Su	Mo	Tu	We	Th	Fr	Sa
28	29	30	31	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31
1	2	3	4	5	6	7

	Jan 2015
Su	Mo	Tu	We	Th	Fr	Sa
28	29	30	31	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31
1	2	3	4	5	6	7


W	Mo	Tu	We	Th	Fr	Sa	Su
22	26	27	28	29	30	31	1
23	2	3	4	5	6	7	8
24	9	10	11	12	13	14	15
25	16	17	18	19	20	21	22
26	23	24	25	26	27	28	29
27	30	1	2	3	4	5	6


W	Mo	Tu	We	Th	Fr	Sa	Su
18	28	29	30	1	2	3	4
19	5	6	7	8	9	10	11
20	12	13	14	15	16	17	18
21	19	20	21	22	23	24	25
22	26	27	28	29	30	31	1
23	2	3	4	5	6	7	8

Advanced Form Elements

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

Knob - Dial

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

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

Sliders

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

Select2 https://select2.github.io/

Range Slider http://refreshless.com/nouislider/

Range Slider

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

Data picker

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

ClockPicker

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

Date Range Picker

Minimal example

All options example

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

Colorpicker

As normal input

As a link

Input Mask http://jasny.github.io/bootstrap/

Input Mask

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

Switcher

Custom switch

Custom switch

Image cropper http://fengyuanchen.github.io/cropper/

Preview image

Comon method

Other method

Awesome bootstrap checkbox

Basic

Circled

Radio