COLOURcode

Form Sliders - easily configurable and customisable range sliders

Summary of features

Few form components are able to enhance usability and aesthetics quite as well as a good range slider, and when optimised for touch and responsiveness, they can help take your app to the next level. The COLOURcode template perfectly integrates Ion.RangeSlider and jQuery-Knob, leaving you to focus on what you're good at.

At a glance

  • Both plugins are fully responsive and touch enabled.
  • Both have been styled for use within coloured panels.
  • Template even includes Ion.RangeSlider validation states.

Ion.RangeSlider ( default form )

Validation states ( default form )

Help text for detailed message.
Help text for detailed message.
Help text for detailed message.

Contextual colours ( default form )

Ion.RangeSlider ( in coloured panel )

Validation states ( in coloured panel )

Help text for detailed message.
Help text for detailed message.
Help text for detailed message.

Contextual colours ( in coloured panel )

jQuery-Knob

jQuery Knob can be configured inline using data attributes. As shown above, this includes size, colours, line thickness, arc, range, steps and lots more besides. Implemented interactions: mouse click and wheel mouse, keyboard (on focus) and fingers (touch events).

jQuery-Knob (in coloured panel)