# 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`, `teal`, `purple`, `orange` and `black`.

Horizontal Sliders

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