Smooth iOS Style Slide Switch Component – SlideOn

Category: Form , Javascript , Recommended | January 5, 2023
Author:shaheenhyderk
Views Total:230 views
Official Page:Go to website
Last Update:January 5, 2023
License:MIT

Preview:

Smooth iOS Style Slide Switch Component – SlideOn

Description:

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

See Also:

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

You Might Be Interested In:


Leave a Reply