The Mobile jQuery Slider is a plugin for jQuery that lets users easily create touch sliders for numerical values. The is exreamily easy to use and can also be linked to form elements and easily used within basic html forms, aswell as complex javascript applications.
The Mobile jQuery Slider is the first product in a series of products that uses “Mobile JUI ”, which is an abbreviation of “Mobile Javascript User Interface”. Mobile JUI is a plugin that has been created to manage mobile UI components, specifically those that are compatible with “Touch” events. It has been designed from the ground up to be as easy to use as possible for all users. All Mobile JUI products will be made to work seemlessly with each other and help you make incredible HTML 5 Mobile Web Applications.
Full List Of Features
Main Features:
- Built Using jQuery and is very lightweight.
- Pre-Minified, and only 14.4 kb for the complete file (excluding themes, which are approximately 1.5 kb each)
- Extreamily Customizable
- Fully tested on iPhone and Android
- Very Extensive Documentation to get you from the first steps of using the slider to fully customizing it to suit your needs.
Other Features:
- Sliders can be lined to form elements such as text boxes
- Designed to keep your code small and easy to understand.
- Fluidly resizes to match the space it has been created in
- Supports Positive-Negative and Negative-Positive configuration
- Look is highly customiseable via css
- Comes with 2 themes aswell as the default style
- Actively Add, remove, update the settings, and change the value of any slider
- Supports ‘getting’ the value of a list of jQuery Elements
- And much… much more!
Usage:
This Product is very comprehensively documented, and takes you through each step in the process of using this product and includes examples with code snippets and live previews.
It is extreamily easy to use the Mobile JUI Slider! All you have to do is include jQuery and the two javascript files in your html page, then activate a slider like so:
$('#my_slider').mobileJUI().slider();
The slider is extensively customizeable, and you only need to define the settings that you want to change! Here are more code snippets of how to mobileJUI Slider:
//Creating a slider with the option 'mouseEvents' set to true:
$('#my_slider').mobileJUI().slider({mouseEvents:true});
//Creating a slider with multiple settings:
$('#my_slider').mobileJUI().slider({
mouseEvents:true,
minVal:-100,
maxVal:100,
value:50
});
//retrieving the value of a slider
$('#my_slider').mobileJUI().slider();
var value = $('#my_slider').mobileJUI().val();
alert(value);
//changing the value of a slider to '30'
$('#my_slider').mobileJUI().val(30);
//Getting the value of multiple sliders:
$('.sliders').mobileJUI().slider();
var values = $('.sliders').mobileJUI().val();
alert(values[0]);
alert(values[0]);
Promotional Accreditation:
Thanks to monty desi for the awesome iphone 4 psd that i have used for some promotional images.
Thanks to DigitalScience for the background image that is also used in promotional images.