Ползунок не работает в jQuery Mobile

Я пробовал виджет слайдера в jQuery Mobile и просто скопировал код из документов:

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

Но это не работает должным образом. Когда я перетаскиваю ползунок в Safari, цифры меняются почти случайным образом. Они увеличиваются от 0 до 9, а затем в крайнем правом углу ползунка он возвращается к 0, а затем, когда я откидываюсь назад, он идет туда и обратно между 0 и 9...

Я что-то делаю неправильно?

Я использую это внутри приложения CodeIgniter.

EDIT:

Я только узнал, что он действительно работает, когда вы живете на iPhone, но не в Safari на рабочем столе. Это все еще странно, потому что в первую очередь мне нужно, чтобы он работал на рабочем столе для разработки, а во-вторых, он работает на демонстрационном сайте jQuery Mobile... Я пробовал смотреть на этот код и даже копировать его точно, но все же не работает на моей странице.

Я обновил до RC2, а script на демо-странице все еще бета-2, может ли это быть?

ИЗМЕНИТЬ 2:

Нет, это не так... Я проверил старые документы, но пример в новых документах с последней версией отлично работал на их демонстрационной странице. Так что это еще что-то.

Ответы

Ответ 1

Сортировка найденного ответа. Таблица стилей jQuery Mobile, когда я смотрела в веб-инспекторе в Safari, установила ширину поля ввода 50 пикселей. Если бы я увеличил это до 70 пикселей, я заметил, что значения фактически увеличивались, я просто видел левую цифру раньше. Как ни странно, кажется, что он отлично работает на своем демо-сайте, хотя используется одна и та же таблица стилей! Во всяком случае, я заработал, переопределив это правило и установив его на 70 пикселей.

Ответ 2

Имейте в виду, что версия 1.0.1 jqueryMobile не полностью совместима с jQuery 1.7.1, и это делает слайдер не работать в некоторых браузерах. Попробуйте понизить jquery до версии 1.6.4, и ползунок должен начать работать

Ответ 3

Не знаю, что еще происходит в вашем коде, вот пример:

Ползунок Документы:

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>

Кстати, я использую Chrome на Ubuntu 10.04, если это имеет значение, это может быть проблема рабочего стола Safari. Попробуйте использовать другой браузер, поскольку ваш код выглядит хорошо для меня

Ответ 4

Я заметил эту же проблему, но я считаю, что это связано с использованием экспериментального scrollview... Если я прокомментирую свои скрипты scrollview, ползунок смены переключателей снова работает.