"Bootstrap Loan Calculator"
Bootstrap 3.1.0 Snippet by ahmadnoori

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="price-box"> <div class="row"> <div class="col-sm-6"> <form class="form-horizontal form-pricing" role="form"> <div class="price-slider"> <h4 class="great">Select price of Home</h4> <span></span> <div class="col-sm-12"> <div id="slider_amirol"></div> </div> </div> <div class="price-slider"> <input name="sliderVal" type="hidden" id="sliderVal" value='0' readonly="readonly" /> <input name="month" type="hidden" id="month" value='24month' readonly="readonly" /> <input name="term" type="hidden" id="term" value='quarterly' readonly="readonly" /> <div class="btn-group btn-group-justified"> </div> </div> </div> <div class="col-sm-6"> <div class="price-form"> <div class="form-group"> <div class="row"> <div class="col-sm-6"> <label for="amount_amirol" class="control-label">Your Savings (£): </label> <span class="help-text">Amount you save</span> </div> <div class="col-sm-6"> <input type="hidden" id="amount_amirol" class="form-control"> <!-- <p class="price lead" id="total"></p> --> <input class="price lead" name="totalprice" type="text" id="total" disabled="disabled" style="" /> </div> </div> </div> </div> </div> </div> </div> </form> </div> </div> </div> </div> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
body { padding-top: 60px; } .price-box { margin: 0 auto; background: #E9E9E9; border-radius: 10px; padding: 40px 15px; /*width: 500px;*/ } .ui-widget-content { border: 1px solid #bdc3c7; background: #e1e1e1; color: #222222; margin-top: 4px; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 7.2em; height: 2.7em; cursor: default; margin: 0 -40px auto !important; text-align: center; line-height: 30px; color: #FFFFFF; font-size: 12px; } .ui-slider .ui-slider-handle .glyphicon { color: #FFFFFF; margin: 0 1px; font-size: 11px; opacity: 0.7; } .ui-corner-all { border-radius: 20px; } .ui-slider-horizontal .ui-slider-handle { top: -.9em; } .ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #f9f9f9; background: #3498db; } .ui-slider-horizontal .ui-slider-handle { margin-left: -0.5em; } .ui-slider .ui-slider-handle { cursor: pointer; } .ui-slider a, .ui-slider a:focus { cursor: pointer; outline: none; } .price, .lead p { font-weight: 600; font-size: 32px; display: inline-block; line-height: 60px; border:0; width: 245px; } h4.great { background: #00ac98; margin: 0 0 25px -60px; padding: 7px 15px; color: #ffffff; font-size: 18px; font-weight: 600; border-radius: 5px; display: inline-block; -moz-box-shadow: 2px 4px 5px 0 #ccc; -webkit-box-shadow: 2px 4px 5px 0 #ccc; box-shadow: 2px 4px 5px 0 #ccc; } .total { border-bottom: 1px solid #7f8c8d; /*display: inline; padding: 10px 5px;*/ position: relative; padding-bottom: 20px; } .total:before { content: ""; display: inline; position: absolute; left: 0; bottom: 5px; width: 100%; height: 3px; background: #7f8c8d; opacity: 0.5; } .price-slider { margin-bottom: 70px; } .price-slider span { font-weight: 200; display: inline-block; color: #7f8c8d; font-size: 13px; } .form-pricing { background: #ffffff; padding: 20px; border-radius: 4px; } .price-form { background: #ffffff; margin-bottom: 10px; padding: 20px; border: 1px solid #eeeeee; min-height: 520px; border-radius: 4px; /*-moz-box-shadow: 0 5px 5px 0 #ccc; -webkit-box-shadow: 0 5px 5px 0 #ccc; box-shadow: 0 5px 5px 0 #ccc;*/ } .form-group { margin-bottom: 0; } .form-group span.price { font-weight: 200; display: inline-block; color: #7f8c8d; font-size: 14px; } .help-text { display: block; margin-top: -10px; margin-bottom: 10px; color: #737373; /*position: absolute;*/ /*margin-left: 20px;*/ font-weight: 200; /*text-align: right;*/ width: 188px; } .price-form label { font-weight: 200; font-size: 21px; } img.payment { display: block; margin-left: auto; margin-right: auto } .ui-slider-range-min { background: #2980b9; } .active-month, .active-term { background: #3276b1; } /* HR */ hr.style { margin-top: 0; border: 0; border-bottom: 1px dashed #ccc; background: #999; }
// JavaScript Document var p = { 0: "£40,000", 1: "£50,000", 2: "£60,000", 3: "£70,000", 4: "£80,000", 5: "£90,000", 6: "£100,000", 7: "£110,000", 8: "£120,000", 9: "£130,000", 10: "£140,000", 11: "£150,000", 12: "£160,000", 13: "£170,000", 14: "£180,000", 15: "£190,000", 16: "£200,000", 17: "£210,000", 18: "£220,000", 19: "£230,000", 20: "£240,000", 21: "£250,000", 22: "£260,000", 23: "£270,000", 24: "£280,000", 25: "£290,000", 26: "£300,000", 27: "£310,000", 28: "£320,000", 29: "£330,000", 30: "£340,000", 31: "£350,000", 32: "£360,000", 33: "£370,000", 34: "£380,000", 35: "£390,000", 36: "£400,000", 37: "£410,000", 38: "£420,000", 39: "£430,000", 40: "£440,000", 41: "£450,000", 42: "£460,000", 43: "£470,000", 44: "£480,000", 45: "£490,000", 46: "£500,000", 47: "£510,000", 48: "£520,000", 49: "£530,000", 50: "£540,000", 51: "£550,000", 52: "£560,000", 53: "£570,000", 54: "£580,000", 55: "£590,000", 56: "£600,000", 57: "£610,000", 58: "£620,000", 59: "£630,000", 60: "£640,000", 61: "£650,000", 62: "£660,000", 63: "£670,000", 64: "£680,000", 65: "£690,000", 66: "£700,000", 67: "£710,000", 68: "£720,000", 69: "£730,000", 70: "£740,000", 71: "£750,000", 72: "£760,000", 73: "£770,000", 74: "£780,000", 75: "£790,000", 76: "£800,000", 77: "£810,000", 78: "£820,000", 79: "£830,000", 80: "£840,000", 81: "£850,000", 82: "£860,000", 83: "£870,000", 84: "£880,000", 85: "£890,000", 86: "£900,000", 87: "£910,000", 88: "£920,000", 89: "£930,000", 90: "£940,000", 91: "£950,000", 92: "£960,000", 93: "£970,000", 94: "£980,000", 95: "£990,000", 96: "£1,000,000", 97: "£1,010,000", 98: "£1,020,000", 99: "£1,030,000", 100: "£1,040,000", 101: "£1,050,000", 102: "£1,060,000", 103: "£1,070,000", 104: "£1,080,000", 105: "£1,090,000", 106: "£1,100,000", 107: "£1,110,000", 108: "£1,120,000", 109: "£1,130,000", 110: "£1,140,000", 111: "£1,150,000", 112: "£1,160,000", 113: "£1,170,000", 114: "£1,180,000", 115: "£1,190,000", 116: "£1,200,000", 117: "£1,210,000", 118: "£1,220,000", 119: "£1,230,000", 120: "£1,240,000", 121: "£1,250,000", 122: "£1,260,000", 123: "£1,270,000", 124: "£1,280,000", 125: "£1,290,000", 126: "£1,300,000", 127: "£1,310,000", 128: "£1,320,000", 129: "£1,330,000", 130: "£1,340,000", 131: "£1,350,000", 132: "£1,360,000", 133: "£1,370,000", 134: "£1,380,000", 135: "£1,390,000", 136: "£1,400,000", 137: "£1,410,000", 138: "£1,420,000", 139: "£1,430,000", 140: "£1,440,000", 141: "£1,450,000", 142: "£1,460,000", 143: "£1,470,000", 144: "£1,480,000", 145: "£1,490,000", 146: "£1,500,000", 147: "£1,510,000", 148: "£1,520,000", 149: "£1,530,000", 150: "£1,540,000", 151: "£1,550,000", 152: "£1,560,000", 153: "£1,570,000", 154: "£1,580,000", 155: "£1,590,000", 156: "£1,600,000", 157: "£1,610,000", 158: "£1,620,000", 159: "£1,630,000", 160: "£1,640,000", 161: "£1,650,000", 162: "£1,660,000", 163: "£1,670,000", 164: "£1,680,000", 165: "£1,690,000", 166: "£1,700,000", 167: "£1,710,000", 168: "£1,720,000", 169: "£1,730,000", 170: "£1,740,000", 171: "£1,750,000", 172: "£1,760,000", 173: "£1,770,000", 174: "£1,780,000", 175: "£1,790,000", 176: "£1,800,000", 177: "£1,810,000", 178: "£1,820,000", 179: "£1,830,000", 180: "£1,840,000", 181: "£1,850,000", 182: "£1,860,000", 183: "£1,870,000", 184: "£1,880,000", 185: "£1,890,000", 186: "£1,900,000", 187: "£1,910,000", 188: "£1,920,000", 189: "£1,930,000", 190: "£1,940,000", 191: "£1,950,000", 192: "£1,960,000", 193: "£1,970,000", 194: "£1,980,000", 195: "£1,990,000", 196: "£2,000,000", 197: "£2,010,000", 198: "£2,020,000", 199: "£2,030,000", 200: "£2,040,000", 201: "£2,050,000", 202: "£2,060,000", 203: "£2,070,000", 204: "£2,080,000", 205: "£2,090,000", 206: "£2,100,000", 207: "£2,110,000", 208: "£2,120,000", 209: "£2,130,000", 210: "£2,140,000", 211: "£2,150,000", 212: "£2,160,000", 213: "£2,170,000", 214: "£2,180,000", 215: "£2,190,000", 216: "£2,200,000", 217: "£2,210,000", 218: "£2,220,000", 219: "£2,230,000", 220: "£2,240,000", 221: "£2,250,000", 222: "£2,260,000", 223: "£2,270,000", 224: "£2,280,000", 225: "£2,290,000", 226: "£2,300,000", 227: "£2,310,000", 228: "£2,320,000", 229: "£2,330,000", 230: "£2,340,000", 231: "£2,350,000", 232: "£2,360,000", 233: "£2,370,000", 234: "£2,380,000", 235: "£2,390,000", 236: "£2,400,000", 237: "£2,410,000", 238: "£2,420,000", 239: "£2,430,000", 240: "£2,440,000", 241: "£2,450,000", 242: "£2,460,000", 243: "£2,470,000", 244: "£2,480,000", 245: "£2,490,000", 246: "£2,500,000", 247: "£2,510,000", 248: "£2,520,000", 249: "£2,530,000", 250: "£2,540,000", 251: "£2,550,000", 252: "£2,560,000", 253: "£2,570,000", 254: "£2,580,000", 255: "£2,590,000", 256: "£2,600,000", 257: "£2,610,000", 258: "£2,620,000", 259: "£2,630,000", 260: "£2,640,000", 261: "£2,650,000", 262: "£2,660,000", 263: "£2,670,000", 264: "£2,680,000", 265: "£2,690,000", 266: "£2,700,000", 267: "£2,710,000", 268: "£2,720,000", 269: "£2,730,000", 270: "£2,740,000", 271: "£2,750,000", 272: "£2,760,000", 273: "£2,770,000", 274: "£2,780,000", 275: "£2,790,000", 276: "£2,800,000", 277: "£2,810,000", 278: "£2,820,000", 279: "£2,830,000", 280: "£2,840,000", 281: "£2,850,000", 282: "£2,860,000", 283: "£2,870,000", 284: "£2,880,000", 285: "£2,890,000", 286: "£2,900,000", 287: "£2,910,000", 288: "£2,920,000", 289: "£2,930,000", 290: "£2,940,000", 291: "£2,950,000", 292: "£2,960,000", 293: "£2,970,000", 294: "£2,980,000", 295: "£2,990,000", 296: "£3,000,000", 297: "£3,010,000", 298: "£3,020,000", 299: "£3,030,000", 300: "£3,040,000", 301: "£3,050,000", 302: "£3,060,000", 303: "£3,070,000", 304: "£3,080,000", 305: "£3,090,000", 306: "£3,100,000", 307: "£3,110,000", 308: "£3,120,000", 309: "£3,130,000", 310: "£3,140,000", 311: "£3,150,000", 312: "£3,160,000", 313: "£3,170,000", 314: "£3,180,000", 315: "£3,190,000", 316: "£3,200,000", 317: "£3,210,000", 318: "£3,220,000", 319: "£3,230,000", 320: "£3,240,000", 321: "£3,250,000", 322: "£3,260,000", 323: "£3,270,000", 324: "£3,280,000", 325: "£3,290,000", 326: "£3,300,000", 327: "£3,310,000", 328: "£3,320,000", 329: "£3,330,000", 330: "£3,340,000", 331: "£3,350,000", 332: "£3,360,000", 333: "£3,370,000", 334: "£3,380,000", 335: "£3,390,000", 336: "£3,400,000", 337: "£3,410,000", 338: "£3,420,000", 339: "£3,430,000", 340: "£3,440,000", 341: "£3,450,000", 342: "£3,460,000", 343: "£3,470,000", 344: "£3,480,000", 345: "£3,490,000", 346: "£3,500,000", 347: "£3,510,000", 348: "£3,520,000", 349: "£3,530,000", 350: "£3,540,000", 351: "£3,550,000", 352: "£3,560,000", 353: "£3,570,000", 354: "£3,580,000", 355: "£3,590,000", 356: "£3,600,000", 357: "£3,610,000", 358: "£3,620,000", 359: "£3,630,000", 360: "£3,640,000", 361: "£3,650,000", 362: "£3,660,000", 363: "£3,670,000", 364: "£3,680,000", 365: "£3,690,000", 366: "£3,700,000", 367: "£3,710,000", 368: "£3,720,000", 369: "£3,730,000", 370: "£3,740,000", 371: "£3,750,000", 372: "£3,760,000", 373: "£3,770,000", 374: "£3,780,000", 375: "£3,790,000", 376: "£3,800,000", 377: "£3,810,000", 378: "£3,820,000", 379: "£3,830,000", 380: "£3,840,000", 381: "£3,850,000", 382: "£3,860,000", 383: "£3,870,000", 384: "£3,880,000", 385: "£3,890,000", 386: "£3,900,000", 387: "£3,910,000", 388: "£3,920,000", 389: "£3,930,000", 390: "£3,940,000", 391: "£3,950,000", 392: "£3,960,000", 393: "£3,970,000", 394: "£3,980,000", 395: "£3,990,000", 396: "£4,000,000", 397: "£4,010,000", 398: "£4,020,000", 399: "£4,030,000", 400: "£4,040,000", 401: "£4,050,000", 402: "£4,060,000", 403: "£4,070,000", 404: "£4,080,000", 405: "£4,090,000", 406: "£4,100,000", 407: "£4,110,000", 408: "£4,120,000", 409: "£4,130,000", 410: "£4,140,000", 411: "£4,150,000", 412: "£4,160,000", 413: "£4,170,000", 414: "£4,180,000", 415: "£4,190,000", 416: "£4,200,000", 417: "£4,210,000", 418: "£4,220,000", 419: "£4,230,000", 420: "£4,240,000", 421: "£4,250,000", 422: "£4,260,000", 423: "£4,270,000", 424: "£4,280,000", 425: "£4,290,000", 426: "£4,300,000", 427: "£4,310,000", 428: "£4,320,000", 429: "£4,330,000", 430: "£4,340,000", 431: "£4,350,000", 432: "£4,360,000", 433: "£4,370,000", 434: "£4,380,000", 435: "£4,390,000", 436: "£4,400,000", 437: "£4,410,000", 438: "£4,420,000", 439: "£4,430,000", 440: "£4,440,000", 441: "£4,450,000", 442: "£4,460,000", 443: "£4,470,000", 444: "£4,480,000", 445: "£4,490,000", 446: "£4,500,000", 447: "£4,510,000", 448: "£4,520,000", 449: "£4,530,000", 450: "£4,540,000", 451: "£4,550,000", 452: "£4,560,000", 453: "£4,570,000", 454: "£4,580,000", 455: "£4,590,000", 456: "£4,600,000", 457: "£4,610,000", 458: "£4,620,000", 459: "£4,630,000", 460: "£4,640,000", 461: "£4,650,000", 462: "£4,660,000", 463: "£4,670,000", 464: "£4,680,000", 465: "£4,690,000", 466: "£4,700,000", 467: "£4,710,000", 468: "£4,720,000", 469: "£4,730,000", 470: "£4,740,000", 471: "£4,750,000", 472: "£4,760,000", 473: "£4,770,000", 474: "£4,780,000", 475: "£4,790,000", 476: "£4,800,000", 477: "£4,810,000", 478: "£4,820,000", 479: "£4,830,000", 480: "£4,840,000", 481: "£4,850,000", 482: "£4,860,000", 483: "£4,870,000", 484: "£4,880,000", 485: "£4,890,000", 486: "£4,900,000", 487: "£4,910,000", 488: "£4,920,000", 489: "£4,930,000", 490: "£4,940,000", 491: "£4,950,000", 492: "£4,960,000", 493: "£4,970,000", 494: "£4,980,000", 495: "£4,990,000", 496: "£5,000,000", }; var t = { 0: "225", 1: "405", 2: "585", 3: "765", 4: "945", 5: "1125", 6: "1305", 7: "1485", 8: "1665", 9: "1845", 10: "2025", 11: "2205", 12: "2385", 13: "2565", 14: "2745", 15: "2925", 16: "3105", 17: "3285", 18: "3465", 19: "3645", 20: "3825", 21: "4005", 22: "4185", 23: "4365", 24: "4545", 25: "4725", 26: "4905", 27: "5085", 28: "5265", 29: "5445", 30: "5625", 31: "5805", 32: "5985", 33: "6165", 34: "6345", 35: "6525", 36: "6705", 37: "6885", 38: "7065", 39: "7245", 40: "7425", 41: "7605", 42: "7785", 43: "7965", 44: "8145", 45: "8325", 46: "8505", 47: "8685", 48: "8865", 49: "9045", 50: "9225", 51: "9405", 52: "9585", 53: "9765", 54: "9945", 55: "10125", 56: "10305", 57: "10485", 58: "10665", 59: "10845", 60: "11025", 61: "11205", 62: "11385", 63: "11565", 64: "11745", 65: "11925", 66: "12105", 67: "12285", 68: "12465", 69: "12645", 70: "12825", 71: "13005", 72: "13185", 73: "13365", 74: "13545", 75: "13725", 76: "13905", 77: "14085", 78: "14265", 79: "14445", 80: "14625", 81: "14805", 82: "14985", 83: "15165", 84: "15345", 85: "15525", 86: "15705", 87: "15885", 88: "16065", 89: "16245", 90: "16425", 91: "16605", 92: "16785", 93: "16965", 94: "17145", 95: "17325", 96: "17505", 97: "17685", 98: "17865", 99: "18045", 100: "18225", 101: "18405", 102: "18585", 103: "18765", 104: "18945", 105: "19125", 106: "19305", 107: "19485", 108: "19665", 109: "19845", 110: "20025", 111: "20205", 112: "20385", 113: "20565", 114: "20745", 115: "20925", 116: "21105", 117: "21285", 118: "21465", 119: "21645", 120: "21825", 121: "22005", 122: "22185", 123: "22365", 124: "22545", 125: "22725", 126: "22905", 127: "23085", 128: "23265", 129: "23445", 130: "23625", 131: "23805", 132: "23985", 133: "24165", 134: "24345", 135: "24525", 136: "24705", 137: "24885", 138: "25065", 139: "25245", 140: "25425", 141: "25605", 142: "25785", 143: "25965", 144: "26145", 145: "26325", 146: "26505", 147: "26685", 148: "26865", 149: "27045", 150: "27225", 151: "27405", 152: "27585", 153: "27765", 154: "27945", 155: "28125", 156: "28305", 157: "28485", 158: "28665", 159: "28845", 160: "29025", 161: "29205", 162: "29385", 163: "29565", 164: "29745", 165: "29925", 166: "30105", 167: "30285", 168: "30465", 169: "30645", 170: "30825", 171: "31005", 172: "31185", 173: "31365", 174: "31545", 175: "31725", 176: "31905", 177: "32085", 178: "32265", 179: "32445", 180: "32625", 181: "32805", 182: "32985", 183: "33165", 184: "33345", 185: "33525", 186: "33705", 187: "33885", 188: "34065", 189: "34245", 190: "34425", 191: "34605", 192: "34785", 193: "34965", 194: "35145", 195: "35325", 196: "35505", 197: "35685", 198: "35865", 199: "36045", 200: "36225", 201: "36405", 202: "36585", 203: "36765", 204: "36945", 205: "37125", 206: "37305", 207: "37485", 208: "37665", 209: "37845", 210: "38025", 211: "38205", 212: "38385", 213: "38565", 214: "38745", 215: "38925", 216: "39105", 217: "39285", 218: "39465", 219: "39645", 220: "39825", 221: "40005", 222: "40185", 223: "40365", 224: "40545", 225: "40725", 226: "40905", 227: "41085", 228: "41265", 229: "41445", 230: "41625", 231: "41805", 232: "41985", 233: "42165", 234: "42345", 235: "42525", 236: "42705", 237: "42885", 238: "43065", 239: "43245", 240: "43425", 241: "43605", 242: "43785", 243: "43965", 244: "44145", 245: "44325", 246: "44505", 247: "44685", 248: "44865", 249: "45045", 250: "45225", 251: "45405", 252: "45585", 253: "45765", 254: "45945", 255: "46125", 256: "46305", 257: "46485", 258: "46665", 259: "46845", 260: "47025", 261: "47205", 262: "47385", 263: "47565", 264: "47745", 265: "47925", 266: "48105", 267: "48285", 268: "48465", 269: "48645", 270: "48825", 271: "49005", 272: "49185", 273: "49365", 274: "49545", 275: "49725", 276: "49905", 277: "50085", 278: "50265", 279: "50445", 280: "50625", 281: "50805", 282: "50985", 283: "51165", 284: "51345", 285: "51525", 286: "51705", 287: "51885", 288: "52065", 289: "52245", 290: "52425", 291: "52605", 292: "52785", 293: "52965", 294: "53145", 295: "53325", 296: "53505", 297: "53685", 298: "53865", 299: "54045", 300: "54225", 301: "54405", 302: "54585", 303: "54765", 304: "54945", 305: "55125", 306: "55305", 307: "55485", 308: "55665", 309: "55845", 310: "56025", 311: "56205", 312: "56385", 313: "56565", 314: "56745", 315: "56925", 316: "57105", 317: "57285", 318: "57465", 319: "57645", 320: "57825", 321: "58005", 322: "58185", 323: "58365", 324: "58545", 325: "58725", 326: "58905", 327: "59085", 328: "59265", 329: "59445", 330: "59625", 331: "59805", 332: "59985", 333: "60165", 334: "60345", 335: "60525", 336: "60705", 337: "60885", 338: "61065", 339: "61245", 340: "61425", 341: "61605", 342: "61785", 343: "61965", 344: "62145", 345: "62325", 346: "62505", 347: "62685", 348: "62865", 349: "63045", 350: "63225", 351: "63405", 352: "63585", 353: "63765", 354: "63945", 355: "64125", 356: "64305", 357: "64485", 358: "64665", 359: "64845", 360: "65025", 361: "65205", 362: "65385", 363: "65565", 364: "65745", 365: "65925", 366: "66105", 367: "66285", 368: "66465", 369: "66645", 370: "66825", 371: "67005", 372: "67185", 373: "67365", 374: "67545", 375: "67725", 376: "67905", 377: "68085", 378: "68265", 379: "68445", 380: "68625", 381: "68805", 382: "68985", 383: "69165", 384: "69345", 385: "69525", 386: "69705", 387: "69885", 388: "70065", 389: "70245", 390: "70425", 391: "70605", 392: "70785", 393: "70965", 394: "71145", 395: "71325", 396: "71505", 397: "71685", 398: "71865", 399: "72045", 400: "72225", 401: "72405", 402: "72585", 403: "72765", 404: "72945", 405: "73125", 406: "73305", 407: "73485", 408: "73665", 409: "73845", 410: "74025", 411: "74205", 412: "74385", 413: "74565", 414: "74745", 415: "74925", 416: "75105", 417: "75285", 418: "75465", 419: "75645", 420: "75825", 421: "76005", 422: "76185", 423: "76365", 424: "76545", 425: "76725", 426: "76905", 427: "77085", 428: "77265", 429: "77445", 430: "77625", 431: "77805", 432: "77985", 433: "78165", 434: "78345", 435: "78525", 436: "78705", 437: "78885", 438: "79065", 439: "79245", 440: "79425", 441: "79605", 442: "79785", 443: "79965", 444: "80145", 445: "80325", 446: "80505", 447: "80685", 448: "80865", 449: "81045", 450: "81225", 451: "81405", 452: "81585", 453: "81765", 454: "81945", 455: "82125", 456: "82305", 457: "82485", 458: "82665", 459: "82845", 460: "83025", 461: "83205", 462: "83385", 463: "83565", 464: "83745", 465: "83925", 466: "84105", 467: "84285", 468: "84465", 469: "84645", 470: "84825", 471: "85005", 472: "85185", 473: "85365", 474: "85545", 475: "85725", 476: "85905", 477: "86085", 478: "86265", 479: "86445", 480: "86625", 481: "86805", 482: "86985", 483: "87165", 484: "87345", 485: "87525", 486: "87705", 487: "87885", 488: "88065", 489: "88245", 490: "88425", 491: "88605", 492: "88785", 493: "88965", 494: "89145", 495: "89325", 496: "89505", } var obj = { '24month' : { 'quarterly' : '1', 'monthly' : '1', 'weekly' : '1' }, '18month' : { 'quarterly' : '1', 'monthly' : '1', 'weekly' : '1' }, '12month' : { 'quarterly' : '1', 'monthly' : '1', 'weekly' : '1' } }; $(document).ready(function() { $("#total").val("10000"); $("#slider_amirol").slider({ range: "min", animate: true, min: 0, max: 496, step: 1, slide: function(event, ui) { update(1,ui.value); //changed calcualtePrice(ui.value); } }); $('.month').on('click',function(event) { var id = $(this).attr('id'); $('.month').removeClass('selected-month'); $(this).addClass('selected-month'); $(".month").removeClass("active-month"); $(this).addClass("active-month"); $('#month').val(id); calcualtePrice() }); $('.term').on('click',function(event) { var id = $(this).attr('id'); $('.term').removeClass('selected-term'); $(this).addClass('selected-term'); $(".term").removeClass("active-term"); $(this).addClass("active-term"); $('#term').val(id); calcualtePrice() }); update(); calcualtePrice(); }); function update(slider,val) { if(undefined === val) val = 0; var amount = p[val]; $('#sliderVal').val(val); $('#slider_amirol a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); } function calcualtePrice(val){ if(undefined === val) val = $('#sliderVal').val(); var month = $('#month').val(); var term = obj[month][$('#term').val()]; var totalPrice = t[val]*term; $("#total").val(totalPrice.toFixed(2)); $("#total12").val(Math.round((totalPrice)/12).toFixed(2)); $("#total52").val(Math.round((totalPrice)/52).toFixed(2)); }

Related: See More


Questions / Comments: