Author: | shaheenhyderk |
---|---|
Views Total: | 230 views |
Official Page: | Go to website |
Last Update: | January 5, 2023 |
License: | MIT |
Preview:

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