JS Slider Control to prefill values and fields.

I need someone to setup two JS slider controls and change some values/hidden fields as the controls are used. The attached image should demonstrate this. I have also attached the current code of the page that needs to be modified. The first slider needs to have a range from 2 - 10, with 2 being set on load. The second slider needs to have a range from 0-10, with 0 being set on load. The calculation for the price on the first slider is as follows: 1-3 ?35 each, 4-7 ?30 each, 8-10 ?28 each The calculation for the price on the second slider is as follows: 1-3 ?3.50 each, 4-7 ?3.00 each, 8-10 ?2.80 each These ranges and values can be set in the JS but need to be easily editable when required. These values are also set in the hidden fields (already exist in code): logsno - no of logs ordered. logsprice - total cost of logs ordered. kindlingno - no of kindling ordered. kindlingprice - total cost of kindling ordered. totalprice - total cost of order No other code should be modified in the template given. Thanks