Question

I’m trying to make my first steps with jquery mobile and I would like to start with some fun.

I’ve a page which displays an interactive svg image, which can be changed when dragging a slider. (buckny) The slider comes from jquery ui and perfoms reasonable on a normal browser but not on my iphone.

So I wanted to take a look at jquery mobile. From the documentation I understood that it could be instantiated exactly the same way as with jquery ui: just call

$('selector').slider

on a jquery selector. (jquery-mobile slider)
So I thought if it is that simple I can leave all my code as it is and just include the jquery-mobile library instead of the jquery-ui library and it should work. But apparantly not, does the jquery selector element need to be inside a form element? I understand from the docs that that is not necessary.
Where do I go wrong?

Answer 1

The ‘jQuery selector element’ only needs to be an input element of the type range. In fact, you don’t even need to call the plugin using jQuery.

From the documentation:

This plugin will auto initialize on any page that contains a text input with the type=”range” attribute.

So all you need is something like this:

<input type="range" id="slider" value="..." min="..." max="..." />

The only problem is that there is no simple way to set the step value (AFAIK), so I’d suggest using higher slider values.

Here is a working example: http://jsfiddle.net/grc4/Wxjvy/

Also, make sure you’ve successfully included all of the following:

• jQuery JavaScript
• jQuery Mobile JavaScript
• jQuery Mobile CSS