Best Element for Draggable location bar.

Question

I'm creating an app that contains a draggable location bar. This element would allow you to drag thru chapters in a book and be seen at the bottom of the viewport. Much like Kindle or other mobile reading apps.

I'd like to hear your thoughts on what element to use.

<progress> 

element, or was also thinking about using

<input type="range">

Or should we just roll our own and throw some javascript at it?

Answer 1

Semantically, your use case is best answered by the number or range input types

<input type="number" max="50" min="1" value="10">
<input type="range" max="50" min="1" step="1" value="10">

The challenge is in styling.

Filament Group have done some interesting work around making accessible slider controls for a variety of inputs, including number: http://filamentgroup.com/dwpe/slider/

Code on Github: https://github.com/filamentgroup/jQuery-Slider