jquery-sliderbutton

jQuery UI/Mobile plugin providing a slider-based button ("slide to activate")

jQuery UI/Mobile Sliderbutton

The sliderbutton plugin provides a button which is triggered by sliding a handle to the side. This is a simple technique to avoid accidentally pressing a button.

Demo:

The plugin is based on the jQuery UI/Mobile slider widget. Since this widget differs in its implementation in jQuery UI and jQuery mobile, the plugin comes in two versions: one for jQuery UI and one for jQuery Mobile. The plugin tries to hide the differences between the versions, which means that the API applies to both versions (exceptions are marked accordingly) but the generated markup and CSS differs.

Initialization & Usage Example

The sliderbutton is created from a div element. When the sliderbutton is activated, the activate event is triggered. So to execute the desired action, bind a function to the activate event.

Example:

// Initialize the sliderbutton
$('#SliderDiv').sliderbutton({
    text: "slide to submit", // Set slider lane text
    activate: function() { alert('Submitted!'); } // Bind to the activate event during initialization
});

// Bind to the activate event after initialization
$('#SliderDiv').bind('sliderbuttonactivate', function() { alert('Activate!'); });

// Turn sliderbutton around
$('#SliderDiv').sliderbutton('option', 'direction', 'right');

More Demos

The demos folder in the download contains a demonstration of most of the features of both versions of the sliderbutton plugin.

There are also demos on jsFiddle and JS Bin where you can play around with the plugin:

Documentation

The documentation of all the options, methods and events can be found in the README on GitHub.

Requirements

The plugin requires

Compatibility

The UI version of the plugin has been successfully tested with jQuery 1.7.2 and jQuery UI 1.8.20 and it should be compatible with future versions as long as the implementation of the jQuery UI slider does not change.

The mobile version has been successfully tested with jQuery 1.7.2 and jQuery Mobile 1.1.0 and it should be compatible with future versions as long as the implementation of the jQuery mobile slider does not change.

Licensing

Copyright © 2012 Jochen Ulrich
http://github.com/j-ulrich/jquery-sliderbutton

Licensed under the MIT license.

Legal Note

Note that Apple Inc. holds the U.S. Patent 8,286,103 which covers unlocking a touch-sensitive device via predefined gestures. In other words: don't use the sliderbutton to unlock devices unless you own a license from Apple.

Donations

If you like my work, you can support me with a donation: