How To Create An On Off Switch With Javascript Css

Creating an on-off switch with JavaScript and CSS can add a cool interactive element to your website or web application. In this guide, we'll walk you through the steps of how to implement this feature to enhance user experience on your website.

Firstly, let's set up the HTML structure for our on-off switch. You'll need a container element to hold our switch and two labels, one for "On" and the other for "Off". We will also use an input element with a type of checkbox to represent the state of the switch. Here's a basic example of the HTML structure:

Html

<div class="onoffswitch">
  
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
</div>

Next, let's move on to the CSS styling for our on-off switch. You can customize the styles to match your website's design. Here is a simple example of CSS for our on-off switch:

Css

.onoffswitch {
  position: relative;
  width: 60px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.onoffswitch-checkbox {
  display: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #ccc;
  border-radius: 20px;
}

.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 14px;
  font-weight: bold;
  box-sizing: border-box;
}

.onoffswitch-inner:before {
  content: "On";
  padding-left: 10px;
  background-color: #34A7C1;
  color: #FFFFFF;
}

.onoffswitch-inner:after {
  content: "Off";
  padding-right: 10px;
  background-color: #FFFFFF;
  color: #666666;
}

.onoffswitch-switch {
  display: block;
  width: 30px;
  margin: 0px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  border: 2px solid #ccc;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0px;
}

Lastly, let's add the JavaScript functionality to toggle the state of our switch. We need to listen for the change event on the checkbox input and update the styling accordingly. Here's the JavaScript code:

Javascript

document.getElementById('myonoffswitch').addEventListener('change', function() {
  var switchLabel = this.nextElementSibling;
  var switchInner = switchLabel.querySelector('.onoffswitch-inner');
  var switchState = this.checked;

  if (switchState) {
    switchInner.style.marginLeft = '0';
  } else {
    switchInner.style.marginLeft = '-100%';
  }
});

By following these steps, you can easily create an on-off switch with JavaScript and CSS for your website. Enhance user interaction and add a modern touch to your web projects with this simple yet effective feature. Happy coding!

Related posts:

Contact Info