Mobile Style Slide to Unlock Plugin With jQuery - slideUnlock

File Size: 7.64 KB
Views Total: 1362
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mobile Style Slide to Unlock Plugin With jQuery - slideUnlock

slideUnlock is a jQuery plugin to create an iOS / Android style 'Slide To Unlock' control which triggers a custom event when you slide the handle to the right side.

See also:

How to use it:

1. The html structure for the 'Slide To Unlock' control.

<div class="slideunlock-wrapper">
  <input type="hidden" value="" class="slideunlock-lockable">
  <div class="slideunlock-slider">
    <span class="slideunlock-label"></span>
    <span class="slideunlock-lable-tip">Slide to unlock!</span>

2. Load jQuery library and the jQuery slideUnlock plugin at the bottom of the document.

<script src="jquery.min.js"></script>
<script src="jquery.slideunlock.js"></script>

3. Create a new SliderUnlock instance and set the plugin to display an alert window when the slider handle has reached the right side.

var slider = new SliderUnlock(".slideunlock-slider", {}, function(){

4. Style the plugin with the following CSS styles.

.slideunlock-wrapper {
  width: 360px;
  position: relative;
  padding: 50px;
  background: #ECF0F1;
  margin: 0 auto;

.slideunlock-slider {
  padding: 20px;
  position: relative;
  border-radius: 2px;
  background-color: #FDEB9C;
  overflow: hidden;
  text-align: center;

.slideunlock-slider.success { background-color: #E5EE9F; }

.slideunlock-label {
  width: 40px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #E67E22;
  z-index: 999;
  border-radius: 2px;
  cursor: pointer;

.slideunlock-label-tip { z-index: 9; }

5. Initialize the plugin and done.


6. Reset the 'Slide To Unlock' control manually.


This awesome jQuery plugin is developed by ArronYR. For more Advanced Usages, please check the demo page or visit the official website.