Home About Contact

Toggle Switch

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here

pseudo-elements(like ::before, ::after)
you have to know transform property.
position property in CSS

A toggle switch is commonly used in real-world applications, especially in user interfaces(UI) for web and mobile application. It represents a binary state, typically "on" or "off".

HTML


<div class="showcontent">
 
    <div>
        <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
        </label>
        <label class="switch" >
            <input type="checkbox" checked>
            <span class="slider"></span>
        </label><br><br>

        <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
        </label>
        <label class="switch">
            <input type="checkbox" checked>
            <span class="slider round"></span>
        </label>

    </div>
</div>

JavaScript


 Don't need any JavaScript.

CSS


.showcontent div{
    background-color: white;
    padding: 5px;

}
.switch{
    cursor: pointer;
    position: relative;
    height: 34px;
    width: 60px;
    display: inline-block;
    z-index: 100;
}
.switch:hover{
    opacity: 0.9;
}
.switch input{
    width: 0;
    height: 0;
    opacity: 0;
}

.slider{
    position: absolute;
    height: inherit;
    width: inherit;
    background-color: #333;
    transition: 0.4s;
}
.slider.round{
    border-radius: 34px;
}


.slider::before{
    content:"";
    position: absolute;
    width: 26px;
    height: 26px;
    background-color:white;
    left: 4px;
    top: 4px;
    transition: 0.4s;
}
.switch input:checked +.slider{
    background-color: rgb(6, 252, 72);
}
.switch input:checked +.slider::before{
    transform: translateX(26px);
}
    
.slider.round::before{
    border-radius: 50%;
}

Application🌐

Dark Mode Toggle

Example: The dark mode toggle in setting on Twitter or Facebook

Wi-Fi or Bluetooth Settings

Example: The Wi-Fi and Bluetooth toggles in the quick setting menu on Android or iOS devices.

Notifications Settings

Example: In the settings of a messaging app, you might have a toggle switch to enable or disable notifications for new messages.

new Date()

Returns a Date object with the current date and time based on the system's clock.
This create a date object represent the current date and time.

toString()

The toString() method converts any data type into a string. Syntax: varname.toString(),

padStart()

It is used to JS to pad the current string with another string untill the resulting string reaches the given length.
Example: str.padStart(len,char or string);

setInterval()

This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

getDate(): Returns the day of the month(1-31)
getMonth(): Returns the month(0-11)
getFullYear(): Returns the year(4 digit year)
getDay(): Returns the day of the week(0-6)
getHours(): Returns the hours(0-23)
getMinutes(): Returns the minites(0-59)
getSeconds(): Returns the seconds(0-59)
getMilliseconds(): Returns the milliseconds(0-999)
getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC

Projects