Form Controls for Ranges In HTML

Question

I've got a form for searching records of messages passed through the server. The messages are keyed with integer ids. I want a control in my search form that will allow users to specify a range of ID numbers.

What I'm doing right now is probably the most obvious solution: two input fields.

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

When the form submits, I get a simple range that I can use to limit a database query.

However, I don't like this solution. I want something that users can use more casually, maybe only using the mouse like some kind of slider or similar control.

My question is, what would be the best way to gather this input from a user without costing him or her much effort?

NOTE: Also, I have no qualms about scripting in some custom controls.

Answer 1

You could use the Jquery UI range slider: http://jqueryui.com/demos/slider/#range

This is a Javascript solution that would require the use of the jquery and jquery-ui library. Should be simple to implement.