hey guys, I need your experience here. I have to implement a double slider to get temperature ranges. (let's say like the one of the volume control box, but with two moving pins). I guess there is some standard JavaScript library, which I can use for this purpose. any suggestion is appreciated thanks
No, there are no "standard libraries" for JavaScript. Take this and adapt it to your situation: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Measurement Sliders with Auto Calculation</title> <script type="text/javascript"> var maximum = 360; // 360 inches = 30 feet function insertCommas(isNum){ return isNum.toString().split('').reverse().join('').replace(/(\d{3})/g,'$1,').split('').reverse().join('').replace(/^,/,''); } function calcVolume(){ var nForm = document.forms[0]; var squareInches = nForm['nLength'].value * nForm['nWidth'].value; nForm['volume'].value = (squareInches / 144).toFixed(2); nForm['totalCost'].value = insertCommas((nForm['volume'].value * nForm['unitPrice'].value).toFixed(2)); } onload=function(){ var wrapperL = document.getElementById('Lwrapper'); var containerL = document.getElementById('Lcontainer'); var length = document.forms[0]['nLength']; wrapperL.style.width = Math.floor(maximum*1.1)+'px'; containerL.style.paddingLeft = parseInt(wrapperL.style.width)*10+'px'; containerL.style.paddingRight = parseInt(wrapperL.style.width)*10+'px'; wrapperL.scrollLeft = 0; wrapperL.onscroll = function(){length.value = Math.round(wrapperL.scrollLeft/20.89);calcVolume()} var wrapperW = document.getElementById('Wwrapper'); var containerW = document.getElementById('Wcontainer'); var width = document.forms[0]['nWidth']; wrapperW.style.width = Math.floor(maximum*1.1)+'px'; containerW.style.paddingLeft = parseInt(wrapperW.style.width)*10+'px'; containerW.style.paddingRight = parseInt(wrapperW.style.width)*10+'px'; wrapperW.scrollLeft = 0; wrapperW.onscroll = function(){width.value = Math.round(wrapperW.scrollLeft/20.89);calcVolume()} document.forms[0].reset(); } </script> </head> <body> <form action=""> <table align='center' cellspacing='0' cellpadding='5' border='1' style='font-size:12pt;background-color:honeydew'> <thead> <tr> <th colspan='2' style='background-color:lightblue'> Cost Estimator </th> </tr> </thead> <thead> <tr> <th> Select </th> <th> Inches </th> </tr> </thead> <tbody> <tr> <td> <div id='Lwrapper' style='overflow:auto;height:40px;margin-bottom:5px'> <div id='Lcontainer'> </div> </div> </td> <td valign='bottom'> Length:<br> <input type='text' size='5' id='nLength' value='0' readonly style='text-align:right'> </td> </tr> <tr> <td> <div id='Wwrapper' style='overflow:auto;height:40px;margin-bottom:5px'> <div id='Wcontainer'> </div> </div> </td> <td valign='bottom'> Width:<br> <input type='text' size='5' id='nWidth' value='0' readonly style='text-align:right'> </td> </tr> <tr> <td align='right'> Square Feet: </td> <td> <input type='text' size='5' id='volume' value='0.00' readonly style='text-align:right'> </td> </tr> <tr> <td align='center'> Price Per Square Foot: <select name='unitPrice' onchange="calcVolume()"> <option selected value='1.99'> Good - $1.99 </option> <option selected value='2.29'> Better - $2.29 </option> <option selected value='2.89'> Best - $2.89 </option> </select> Total: </td> <td> $<input type='text' name='totalCost' size='6' value='0.00' readonly style='text-align:right'> </td> </tr> </tbody> </table> </form> </body> </html> Code (markup):