best graphical widget to define a range within a range

I am developing a web page using HTML, JavaScript and CSS.

I have a range (e.g. 1,10000) I want the user to choose a sub-range (e.g. 1000-2800)

What's the best way to do this? Is there some kind of slider or similar?

At the moment I am using two textf开发者_C百科ields and do some validation but that's far from a nice UX.

How about some sort of range slider?

Here's a jQuery one for you

http://ghusse.github.com/jQRangeSlider/stable/demo/

Check out this jQuery UI demo.

You can use the jQuery UI slider. It has an option to choose a sub-range.