Togglebutton

<html>
<head>
<style>
#togglebar{
box-sizing: border-box;
width: 70px; height: 30px;
position: relative;
border: 2px solid;
border-radius: 20px;
transition: .5s linear;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

#togglebar.on{
background: #39ff14;
}

#togglebutton{
height: 100%;
aspect-ratio: 1;
outline: 2px solid;
border-radius: 50%;
background: pink;
position: absolute;
left: 0;
transition: .5s linear;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

#togglebutton.on{
left: calc(100% - 26px);
background: green;
}
</style>
</head>
<body>
<div id="togglebar">
<div id="togglebutton"></div>
</div>

<script>
let togglebar= document.querySelector("#togglebar");
let togglebutton= document.querySelector("#togglebutton");


togglebar.onclick= function(){
this.classList.toggle("on");
togglebutton.classList.toggle("on");
let on= this.classList.contains("on");
if(on){
//Do this when ON
}
else{
//Do this when OFF
}
};
</script>
</body>
</html>