Turn Two Input Text Fields into One Jquery Range Slider

I would like to take

     <form name='bid_range' action='".$action."' method='post'>
     <ul>

     <p><input type=text name=bid_from size=6 value='' /></p>        
     <li><input type=text name=bid_to size='6' value='' /></li>
     <input type='hidden' name='bid_next' value='".$TPL_next_bid_value."'>
     <input type='hidden' name='seller_id' value='0'>
     <input type='hidden' name='bid_type' value='range'>
     <input type='hidden' name='title' value='".$TPL_title_value."' >
     <input type='hidden' name='category' value='".$TPL_category_value."' >
     <input type='hidden' name='id' value='".$TPL_id_value."'>
     <input type='hidden' name='t_remained_bids' value='".$remained_bids."'>
     <input type='hidden' name='auction_type' value='".$auction_type."'>
     <input type='hidden' name='form_type' value='".$type."'>
     <input type='hidden' name='f5_num' value='".$f5_num."'>
     <input type=submit id='subbutton'  name='subbutton' value='BID' class='button' style='width:70px;'>
     </ul>
     </form>

... And turn that code into

<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

For the purpose of a jquery range slider instead of two text fields. Can someone help in how to go around doing this? O, and I a开发者_运维百科lso have the usual jquery javascript, but I'm not sure if that is needed to configure.

http://jqueryui.com/demos/slider/#range

Take a look at this. It is exactly what you need.