Web toggle/switch buttons are scarce, mainly repeating each other, with minor code nuances.Let's have a simple switch without large frameworks invocation. No component structure, single web coding - html/css/js - the developers like it.
The CSS part (put it in a < head >< style > tag on the HTML page, or keep it in an external file referenced with < link rel="stylesheet" href=.../>)
The Javascript part (put it in a < script > tag on the HTML page, or keep it in an external file referenced with < script src=...)
And now the HTML part. Your case settings would be applied here - see the hints later on.
Custom settings (in the HTML part):
- Set the width and the height of the switch replacing the values for '--switch-width' and '--switch-height'.
- Set your desired switch text under the node with class 'mi-switch-text'.
- Change the initial value within the input tag (must be 1 or 0).
- Optionally put the keyword disabled within the div of class 'mi-switch'.
Consuming the selected value:
Go switch it!