Form Slider + Switcher header small text goes here...

Default Switchery

Default Switchery

Use the attribute data-render="switchery" to render the switchery switcher, and use the attribute data-theme="default" to set the theme color

All Available Options
  • theme: data-theme="default"
  • secondary color: data-secondary-color="#dfdfdf"
  • classname: data-classname="switchery"
  • disabled: data-disabled="true"
  • disabledOpacity: data-disabled-opacity="0.5"
  • speed: data-speed="0.5s"

Switchery Theme

Swither Data attribute
data-theme="default"
data-theme="red"
data-theme="blue"
data-theme="purple"
data-theme="orange"
data-theme="black"

Switchery Theme

Checked & Unchecked Switchery

checked unchecked

Disabled

checked

unchecked

State

check state

true

Powerange Slider

Default Powerange

Use the attribute data-render="poweranger-slider" to render the switchery powerange slider.

All Available Options
  • decimal: data-decimal="false"
  • disable: data-disable="false"
  • disableOpacity: data-disable-opacity="0.5"
  • hideRange: data-hide-range="false"
  • klass: data-class=""
  • min: data-min="0"
  • max: data-max="100"
  • start: data-min="null"
  • step: data-min="null"
  • vertical: data-vertical="false"

Slider Colors

Available Classes for powerange slider is red, blue, purple, orange and black.

Horizontal Sliders

Set the attribute data-vertical="true" in order to render the slider as horizontal view.

Color Theme
Header Styling
Header
Sidebar Styling
Sidebar
Sidebar Gradient
Content Styling