I have developed a search form to retrieve records of messages processed by the server. Each message has a unique integer id associated with it. I am looking to add a feature in my search form that allows users to specify a range of message ID numbers.
Currently, I am using a traditional approach with two input fields.
<div class="header">
Message ID:
</div>
<div>
<input name="msgIdRangeBottom" type="text"></input>
- To -
<input name="msgIdRangeTop" type="text"></input>
</div>
Upon form submission, I receive a simple range that can be used to narrow down a database query.
However, I am not satisfied with this method and would prefer something more user-friendly, like a slider or similar control that users can easily interact with using their mouse.
My question is, what would be the most efficient way to collect this input from users without requiring significant effort on their part?
NOTE: I am open to implementing custom controls if necessary.