We use cookies for keeping user sessions alive and for site usage statistics.
Please accept cookies to continue browsing the site.

 

(You can decline cookies later navigating to page 'Privacy Policy'.)

Create a front end toggle switch/button


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!


Back to List