Smooth iOS Style Slide Switch Component – SlideOn

Preview:

Description:

SlideOn is a tiny and fast UI component that converts normal checkbox inputs into customizable slide switches.

See Also:

• 10 Best Toggle Switch JavaScript And CSS Libraries

How to use it:

1. Insert the SlideOn’s JavaScript and Stylesheet.

<link rel="stylesheet" href="slideon.css" />
<script src="slideon.js"></script>

2. Add the CSS classes slideon and slideon-auto to checkboxes, and the SlideOn will do the rest.

<input type="checkbox" class="slideon slideon-auto" checked />
<input type="checkbox" class="slideon slideon-auto" />

var slideon = new Slideon()
slideon.load()

3. You can also wrap the checkbox in the label element as follows:

<label class="slideon">
  <input type="checkbox" checked>
  <span class="slideon-slider"></span>
</label>

4. Change the shape to ‘Square’.

<input type="checkbox" class="slideon slideon-auto slideon-square" />

5. Change the size of the switch.

• slideon-xs
• slideon-sm
• slideon-md
• slideon-lg
• slideon-xl

<input type="checkbox" class="slideon slideon-auto slideon-xl" checked>

<!-- OR -->
<label class="slideon slideon-xl">
  <input type="checkbox" checked>
  <span class="slideon-slider"></span>
</label>

6. Change the theme of the switch.

• slideon-primary
• slideon-secondary
• slideon-success
• slideon-warning
• slideon-info
• slideon-dark

<input type="checkbox" class="slideon slideon-auto slideon-info" checked>

<!-- OR -->
<label class="slideon slideon-info">
  <input type="checkbox" checked>
  <span class="slideon-slider"></span>
</label>

7. Add padding to the switch.

• slideon-p0
• slideon-p1
• slideon-p2

<input type="checkbox" class="slideon slideon-auto slideon-p1" checked>

<!-- OR -->
<label class="slideon slideon-p1">
  <input type="checkbox" checked>
  <span class="slideon-slider"></span>
</label>

8. Combine them all.

• slideon-p0
• slideon-p1
• slideon-p2

<input type="checkbox" class="slideon slideon-auto slideon-danger slideon-md slideon-p1" checked>

<!-- OR -->
<label class="slideon slideon-danger slideon-md slideon-p1">
  <input type="checkbox" checked>
  <span class="slideon-slider"></span>
</label>

Changelog:

v1.0.2 (01/05/2023)

• If you are using slideon-auto, create an object of Slideon and call the load function.

v1.0.1 (10/27/2022)

• Added disable button properties