Slider not working in jQuery Mobile

问题

I'm trying the slider widget in jQuery Mobile, and just copied the code from the docs:

    <div data-role="fieldcontain">
        <label for="slider">Input slider:</label>
        <input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
    </div>

But this doesn't work as expected at all. When I drag the slider in Safari the numbers change almost randomly. They increase from 0 to 9 and then at the far right of the slider it goes back to 0, and then when I slide back it goes back and forth between 0 and 9...

Am I doing something wrong??

I am using this inside a CodeIgniter application.

EDIT:

I just found out that it actually works when live on the iPhone, but not in Safari on the desktop. It's still weird, because first of all I need it to work on the desktop for development, and secondly, it works on the jQuery Mobile demo site... I have tried looking at that code, and even copying it exactly, but still it doesn't work on my page.

I have updated to RC2, while the script on the demo page is still beta 2, could that be it?

EDIT 2:

No, that was not it... I had checked the old docs, but the example in the new docs with the latest release worked fine on their demo page as well. So it's something else.

回答1:

keep in mind that version 1.0.1 of jqueryMobile is not fully compatible with jquery 1.7.1 and this makes the slider not working on some browsers. Try to downgrade jquery to version 1.6.4 and the slider should start working

回答2:

Hmm not sure what else is going on in you code, here is an example:

http://jsfiddle.net/sYQAu/1/

Slider Docs:

http://jquerymobile.com/demos/1.0rc2/docs/forms/slider/index.html

HTML

<div data-role="page" id="slider-test">
    <div data-role="content">

        <label for="slider-0">Input slider:</label>
        <input type="range" name="slider-1" id="slider-0" value="2" min="0" max="10"  />
        <br />
        <div data-role="fieldcontain">
            <label for="slider">Input slider:</label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
        </div>

    </div>
</div>

BTW Im using Chrome on Ubuntu 10.04 if that matters, this might be a Safari desktop issue. Try using another browser as your code looks fine to me

回答3:

Sort of found the answer myself. The jQuery Mobile stylesheet when I looked in the web inspector in Safari had set the width of the input field to 50px. If I increased that to 70px I noticed that the values were in fact increasing, it was just that I only saw the left digit before. Strangely, it seems to be working fine on their demo site, even though the same stylesheet is used! Anyway, I got it working by overriding that rule and setting it to 70px.

回答4:

I have noticed this same issue but I believe it is due to using the experimental scrollview... If I comment out my scrollview scripts the flips switch slider works again.

来源：https://stackoverflow.com/questions/7836295/slider-not-working-in-jquery-mobile

标签

jquery-mobile

slider