My requirement was to show a toggle button with a message on it's right for mobile website. I have implemented this but I am not sure how good it is & if it will work on most of the mobile browsers. I am very new to the UI development & this is the first time I have implemented a UI component. To give an idea, this final implemented result look somewhat similar to this
I have broken down this requirement into 5 parts -
1. The container - Parent div
2. Checkbox. - Hidden checkbox behind button
3. The button
4. The inner circle of button
5. The message string which will be shown on the right.
Additionally, this button needs to be disabled for first few seconds of page. By disabling, I mean it should be unclickable & it's UX would be little different so that user knows that it's disabled.
JS Function to handle click -
So, the idea is to append a css property called 'active' on click of the switch so that the inner circle is moved to right & background color is changed. I need to know if there is any risky css property I am using which may not work on many browsers. Also, is there any scope of improvement in this implementation?
Is that the actual name you're using, my-toggle-button? Because if it is, then it can be improved by giving it a better name. Names should reflect their intent. What setting is being toggled by this? For example, if this were for a WiFi on/off setting, then I would name this button toggleWifi or wifiToggle or even simply just wifi.