Oftentimes, when designing a user interface, we find the need for a simple component allowing the user to toggle a true/false (or on/off) state. These “switches” have become a fairly common UI element, found very commonly in the standard iOS visual component library.
Recently, I’ve been spending a good amount of time building some in-house app prototype screens using Twitter Bootstrap, and came upon the need for one of these components. While bootstrap does come with a great assortment of visual elements (complete with jQuery code to make them functional!), I found it lacking these simple switch components. After a little planning, I came up with some code to make a pretty versatile on/off switch.
Check out a quick demo of the UI Switch here!
To create this nifty little element, first lets create our markup:
<div class="bool-slider true"> <div class="inset"> <div class="control"></div> </div> </div> Here we have three nested divs, each one representing a piece of our switch. The first div has the classes ‘bool-slider’ and ‘true’. Since our switches have two states (true or false), then we can associate two classes to the main containing element. Also, in case you were wondering, the class is called bool-slider because of the sliding like motion we wish to emulate, and the fact that the switch is based on boolean (true/false) values. The second div is going to be our inset. This is going to be the area containing our actual control. And, as you can probably guess from reading the class of the final div, it is our actual control. This is what the user will click to change the state of our switch. Go ahead and load it up in a browser. Obviously, its not a lot to look at. Lets set up some styles to make our switch look pretty!
.bool-slider { border: 1px solid #CCC; color: #FFF; font-size: 18px; font-weight: 800; font-family: Helvetica, Verdana, Arial, sans-serif; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); height: 35px; width: 100px; border-radius: 25px; } .bool-slider.true .inset { background-color: #51a351; *background-color: #499249; background-image: linear-gradient(top, #62c462, #51a351); background-repeat: repeat-x; border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .bool-slider.true .inset .control{float: left;} .bool-slider.true .inset .control:after { content: 'On'; position: relative; right: -135%; top: 20%; } .bool-slider.false .inset { background-color: #da4f49; *background-color: #bd362f; background-image: linear-gradient(top, #ee5f5b, #bd362f); background-repeat: repeat-x; border-color: #bd362f #bd362f #802420; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .bool-slider.false .inset .control{float: right;} .bool-slider.false .inset .control:before { content: 'Off'; position: relative; left: -100%; top: 20%; } .bool-slider .inset { width: 100%; height: 100%; border-radius: 20px; } .bool-slider .inset .control { background-color: #000; width: 40%; height: 100%; border-radius: 20px; background-color: #f5f5f5; *background-color: #e6e6e6; background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; } .bool-slider .inset .control:hover { cursor: pointer; } .bool-slider.disabled { color: #CCC; } .bool-slider.disabled .inset { background-color: #f5f5f5; *background-color: #e6e6e6; background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; } .bool-slider.disabled .control { cursor: default; } Most of these styles are pretty basic, and utilize some CSS3 to look pretty. However, one thing to notice that is crucial to the proper display (and customization) of our switch is the .bool-slider.true .inset .control:after and .bool-slider.false .inset .control:after styles. In these rules, we define the text to be displayed during a given state of our switch. This is where you can get creative and add whatever text you want!
Now that we have some styles set up for all possible states of our slider, we’ll want to add the ability for the user to change the state! All this will take is a little jQuery to get going, so make sure that you have it loaded into your document BEFORE the following code:
$(document).ready(function() {
$('.bool-slider .inset .control').click(function() {
if (!$(this).parent().parent().hasClass('disabled')) {
if ($(this).parent().parent().hasClass('true')) {
$(this).parent().parent().addClass('false').removeClass('true');
} else {
$(this).parent().parent().addClass('true').removeClass('false');
}
}
});
});
This code is pretty standard jQuery. We’ll attach a click function to our control, and when that function is fired, we’ll first make sure that the switch isn’t disabled. Then we’ll look to see which state it is in, and switch it to the other. This is done by simply switching the class from true to false, and vice versa. The control div will actually switch sides due to the float styles we have attached to it when the .bool-slider that it belongs to is either on or off.
And thats that! The actual implementation is pretty simple, and there are probably better ways that this could’ve been done (CSS3 animations as opposed to just class changes, jQuery slides, a plugin, etc.). Feel free to edit the code any way you’d like, and utilize it in any of your projects!
