Элементы управления формы для диапазонов в HTML

Question

У меня есть форма для поиска записей сообщений, пропущенных через сервер.Сообщения снабжены целочисленными идентификаторами.Мне нужен элемент управления в форме поиска, который позволит пользователям указывать диапазон идентификаторов.

То, что я сейчас делаю, является, пожалуй, наиболее очевидным решением: два поля ввода.

    <div class="header">
        Message ID:
    </div>
    <div>
        <input name="msgIdRangeBottom" type="text"></input>
        - To -
        <input name="msgIdRangeTop" type="text"></input>
    </div>

Когда форма отправляется, я получаю простой диапазон, который я могу использовать для ограничения запроса к базе данных.

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

Мой вопрос заключается в том, как лучше всего получить этот ввод от пользователя без его затратили ее большие усилия?

ПРИМЕЧАНИЕ. Кроме того, у меня нет никаких сомнений в отношении сценариев в некоторых пользовательских элементах управления.

Answer 1

Вы можете использовать ползунок диапазона Jquery UI: http://jqueryui.com/demos/slider/#range

Это решение Javascript, которое потребует использования библиотек jquery и jquery-ui.Должно быть простым в реализации.