Have you ever wanted to create a slider in HTML + CSS? Well, you’re in the right place! This is how to create a slider!
1. Switch Label
Rectangular Switch:
<!DOCTYPE html>
<html>
<body> // Define Label <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label>
</body>
</html>
Round Switch:
<!DOCTYPE html>
<html>
<body> // Define Label <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label>
</body>
</html>
2. Add CSS
CSS:
.switch { position: relative; display: inline-block; width: 60px; height: 34px;
} .switch input { opacity: 0; width: 0; height: 0;
} .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;
} .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;
} input:checked + .slider { background-color: #2196F3;
} input:focus + .slider { box-shadow: 0 0 1px #2196F3;
} input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);
}
Add this if it is a round slider:
.slider.round { border-radius: 34px;
} .slider.round:before { border-radius: 50%;
}
And this is the result:
I hoped this tutorial helped you! 🙂
Keep Coding!