Mobile jQuery Slider - A JUI Product

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.

Mobile jQuery Slider comes with 2 extra themes as well as the default style, each theme can be customised, such as telling the theme what colours you’d like to use for each part of the slider.

Full List Of 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.
• Comes with 2 themes as well as the default “look”. Each one can be customised comprehensively including all the colours and dimensions etc.

• 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
• 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 includes comprehensive HTML Dcumentation, 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]);

// **************************
//Changing the settings of a slider which has already been created:
$('.sliders').mobileJUI().update({mouseEvents:true});

// **************************
//Removing a slider and returning it to its previous state.
$('.sliders').mobileJUI().remove();

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.