Slideon is a simple component which creates beautiful slide switches, by converting checkboxes, with zero latency and easy integration.
No latency - while integrating many other similar components, you will see a minor latency(checkbox turning to switch) if your project is huge but not in slideon.
Easy integration - just add some classes to your checkbox.
Different styles - just add some classes for different sizes, shapes and colors.
Events and actions - you can trigger events and actions just like how you do with a normal checkbox.
Light weight - the component is very much lighter.
Faster - the processing of component is faster.
Add the following cdn to your web page.
Download slideon and just add the script file and css file to your website.
You can integrate it in 2 methods. Method 1 is easy, while method 2 is fast.
Add 2 classes, slideon and slideon-auto to your checkbox and call the load function as shown below. This is the simplest way to integrate but there is a chance of a minute latency which won't be noticeable as there are some js processing.
Wrap your checkbox with a label which has a class slideon in it and add a span sibling to your checkbox with a class slideon-slider. This is comparitively a bit more lengthy to integrate, but the latency will be zero as there won't be any js processing.
If you are using the method 1 for integration that is with slideon-auto, the you should call the load function
while adding checkbxes in the run time.
For method 2 you don't have to do anything extra while adding checkbxes in the run time.
Slideon currently supports different colors, sizes and shapes. You can use combinations of all the styles shown below.
Currently slideon supports 7 colors. It follows color standards of bootstrap colors.
Currently slideon supports 5 sizes.
Currently slideon supports 3 levels of padding for the switch.
Currently slideon supports 2 shapes.
Make slideon button disabled just by adding disabled to your input.
All the events and actions are done with js just like how you handle a normal check box.
Copyright 2022 Shaheen Hyder
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.