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:

• jQuery Plugin For iOS Style 'Slide To Click' Slider
• jQuery Slide to Activate Plugin - sliderbutton

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>
  </div>
</div>

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(){
    alert('success');
});

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.

slider.init();

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

slider.reset();

---

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