Mobile app interfaces have been utilizing on/off sliding switches for a while. These are most commonly found on the settings page where users can update preferences for their account. But web designers have taken notice and have built many open platforms to generate your own on/off switch sliders.
In this tutorial I want to look specifically at the jQuery Toggles plugin developed by Simon Tabor. It comes with 5 pre-designed UI themes which you can easily update. Plus, you have the option of triggering click or slide events, which may also tie into a form checkbox on the page. Anyone running a modern JavaScript-enabled browser should be able to experience the full effect. Take a peek at my live demo to catch a glimpse of what we are building.
Live Demo – Download Source Code
Getting Started
The first step is to download a copy of the jQuery Toggles plugin. You can grab this from the Github repo which also contains a small live example. I have already downloaded a local copy of jQuery into a relative /js folder. Move the file toggles.min.js into this folder as well.
Now for the CSS you’ll need to copy toggles.css along with the entire themes/ directory. This will include the main stylesheets which come bundled along with the plugin. Note that your toggles.css file should be located in the same directory as the themes/ folder to get everything working properly.
Also notice that I am referencing another theme file by the name toggles-soft.css. This allows me to apply a soft CSS class onto a container which will then affect all my internal toggle elements(as targeted by jQuery later on). Other theme choices include light, dark, iPhone, or modern, and you can see what they look like on the plugin’s homepage.
Now the form itself doesn’t have much out of the ordinary except for a switch slider. When we press submit, the form will trigger a jQuery function which stops the typical page refresh. Instead we output direct values of the fields down below the form to check how you might handle responses in your own web application.
Creating the Form
Inside my body content I’ve created a form element with the ID #basicform. This can be targeted using jQuery to better handle submission functionality. Also I’ve appended the class .toggle-soft which is my default choice of themes when designing this layout.
If we skip down towards the bottom of the form you will notice a div with the ID #emailupdates. The on/off slider in my example will determine if a new user should be added onto the newsletter subscriber’s list. The additional class .toggle is how we target all the elements via jQuery. .floatright is just additional positioning rules to get the switch fitted nicely into the form.
Also notice the checkbox element underneath using the ID #emailupdatescheck. I have this disabled from use and hidden on the page using display: none; so that users are not confused. Thankfully we can still update the checkbox dynamically in jQuery by setting it as an option parameter.
Generating the Switch
Keep in mind there are a large number of additional parameters you may set on this function to customize the display. Check the example codes on Github for a full list. In my example we can update a good portion of the useful options which can impact user experience.
You will find this JS code at the bottom of the page right before the closing </body> tag. The selector class .toggle works for any other toggle element added onto this page. It allows you to generate practically infinite on/off switches with less hassle – although you will need to create a new checkbox for each slider as well. The toggles() function gets called with internal parameters contained inside curly braces.
drag and click are two options which allow you to specify which type of interaction will change the value of the slider. My example sets drag to false meaning that you only need to click on the slider to change values. The text should be self-explanatory on how to update the inner display content. Remember to encapsulate these values inside another set of curly braces otherwise it won’t work.
The checkbox parameter is very useful so we can pass a real form element to be attached onto this slider. It will take any jQuery object selector and, in this case, I am targeting our hidden checkbox. Both values initially load in the OFF position and we can see how this value updates by displaying some output text.
Form Output Values
Once you hit the submit button you may notice a new block of code appears underneath. This will display the current text value of the username and password fields, along with a value for the slider checkbox. Let’s take a look at the final block of jQuery code:
Whenever a user submits the form we run e.preventDefault() to stop the submission. Then we determine if the hidden checkbox is currently checked or not. If yes, then the slider value is set to “on” (otherwise it is set to “off”). You could theoretically make these values anything you like as long as it makes sense. Also there are two other variables containing the username and email input values.
Finally I’ve put together a concatenated set of string variables which makes up my sample HTML. This gets appended onto the page in a div with the ID #codeoutput. It will not display anything at first but once there is some internal HTML it appears like monospaced code. This is merely one method to determine a slider’s value but it works great and even allows you to pass it into a backend script using Ajax.
Live Demo – Download Source Code
Final Thoughts
Not every form will require a checkbox or switch element. User profile settings pages are a common place to use these sliders. Other places may include online forums or social networks where users may switch between sharing and display options.
Ultimately this plugin is a fantastic choice for implementing quick & simple UI input sliders. Feel free to download a copy of my source code and try creating your own similar form design.