"Bootstrap Pricing Slider (Donations)"
Bootstrap 3.1.0 Snippet by amirolahmad

<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"> <form class="form-horizontal form-pricing" role="form"> <div class="price-slider"> <h4 class="great">Amount</h4> <span>Minimum $10 is required</span> <div class="col-sm-12"> <div id="slider"></div> </div> </div> <div class="price-slider"> <h4 class="great">Duration</h4> <span>Minimum 1 day is required</span> <div class="col-sm-12"> <div id="slider2"></div> </div> </div> <div class="price-form"> <div class="form-group"> <label for="amount" class="col-sm-6 control-label">Amount ($): </label> <span class="help-text">Please choose your amount</span> <div class="col-sm-6"> <input type="hidden" id="amount" class="form-control"> <p class="price lead" id="amount-label"></p> <span class="price">.00</span> </div> </div> <div class="form-group"> <label for="duration" class="col-sm-6 control-label">Duration: </label> <span class="help-text">Choose your commitment</span> <div class="col-sm-6"> <input type="hidden" id="duration" class="form-control"> <p class="price lead" id="duration-label"></p> <span class="price">days</span> </div> </div> <hr class="style"> <div class="form-group total"> <label for="total" class="col-sm-6 control-label"><strong>Total: </strong></label> <span class="help-text">(Amount * Days)</span> <div class="col-sm-6"> <input type="hidden" id="total" class="form-control"> <p class="price lead" id="total-label"></p> <span class="price">.00</span> </div> </div> </div> <div class="form-group"> <div class="col-sm-12"> <button type="submit" class="btn btn-primary btn-lg btn-block">Proceed <span class="glyphicon glyphicon-chevron-right pull-right" style="padding-right: 10px;"></span></button> </div> </div> <div class="form-group"> <div class="col-sm-12"> <img src="http://amirolahmad.github.io/bootstrap-pricing-slider/images/payment.png" class="img-responsive payment" /> </div> </div> </form> <p class="text-center" style="padding-top:10px;font-size:12px;color:#2c3e50;font-style:italic;">Created by <a href="https://twitter.com/AmirolAhmad" target="_blank">AmirolAhmad</a></p> </div> </div> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
body { padding-top: 50px; padding-bottom: 50px; } .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: 5.2em; height: 2.2em; cursor: default; margin: 0 -40px auto !important; text-align: center; line-height: 30px; color: #FFFFFF; font-size: 15px; } .ui-slider .ui-slider-handle .glyphicon { color: #FFFFFF; margin: 0 3px; font-size: 11px; opacity: 0.5; } .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; } 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; 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: 32px; 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; } /* HR */ hr.style { margin-top: 0; border: 0; border-bottom: 1px dashed #ccc; background: #999; }
$(document).ready(function() { $("#slider").slider({ animate: true, value:1, min: 0, max: 1000, step: 10, slide: function(event, ui) { update(1,ui.value); //changed } }); $("#slider2").slider({ animate: true, value:0, min: 0, max: 500, step: 1, slide: function(event, ui) { update(2,ui.value); //changed } }); //Added, set initial value. $("#amount").val(0); $("#duration").val(0); $("#amount-label").text(0); $("#duration-label").text(0); update(); }); //changed. now with parameter function update(slider,val) { //changed. Now, directly take value from ui.value. if not set (initial, will use current value.) var $amount = slider == 1?val:$("#amount").val(); var $duration = slider == 2?val:$("#duration").val(); /* commented $amount = $( "#slider" ).slider( "value" ); $duration = $( "#slider2" ).slider( "value" ); */ $total = "$" + ($amount * $duration); $( "#amount" ).val($amount); $( "#amount-label" ).text($amount); $( "#duration" ).val($duration); $( "#duration-label" ).text($duration); $( "#total" ).val($total); $( "#total-label" ).text($total); $('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); $('#slider2 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$duration+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); }

Related: See More


Questions / Comments:

Hi, I used this snipped but now working. Slider not working, how I should but html, css and js codes in dreamweaver? Thanks

Felipe Rozo () - 8 years ago - Reply 0


a solution to my own post

https://stackoverflow.com/questions/13808663/jquery-ui-slider-touch-drag-drop-support-on-mobile-devices

mgm2035 () - 5 years ago - Reply 0


Hey guys.

This examples doesnt work for mobiles. If anyone know the reason.. please.. let us know.

mgm2035 () - 5 years ago - Reply 0


Thanks for the great work.

Is there a way to do the following:

slider(1) (product's quantity) values are: 7,8,9
slider(2) (product's options) values are: a,b,c

Price will be as follows:
When slider(1) is "7" and slider(2) is "a" price is "78"
When slider(1) is "7" and slider(2) is "b" price is "13"
When slider(1) is "7" and slider(2) is "c" price is "58"
When slider(1) is "8" and slider(2) is "a" price is "41"
When slider(1) is "8" and slider(2) is "b" price is "36"
When slider(1) is "8" and slider(2) is "c" price is "94"
When slider(1) is "9" and slider(2) is "a" price is "20"
When slider(1) is "9" and slider(2) is "b" price is "65"
When slider(1) is "9" and slider(2) is "c" price is "87"

Thanks so much

Black () - 8 years ago - Reply 0


Very nice, would be so cool if double-clicking the blue element would let you input the exact number you want!

Stefano Viegas () - 8 years ago - Reply 0


I want to show duration in number format

akhis1234 () - 9 years ago - Reply 0


Guest () - 9 years ago - Reply 0


give full source code not working....

gopi () - 9 years ago - Reply 0


not work in mobile :l

Mcl () - 10 years ago - Reply 0


got it working for mobile http://bootsnipp.com/snippe...

jude () - 9 years ago - Reply 0


nice ! thanks! Could you change the link to http://bootsnipp.com/snippe... so that you will get some likes/views that way?

maxsurguy () - 9 years ago - Reply 0


Sure.. I get what u are saying about Mine having user/ but do u just mean change link in comments? New to bootsnip if u mean something else.. one thing need to do is scale it for mobile which would require CSS overhaul..

jude () - 9 years ago - Reply 0


Yeah I meant in comments :)
That's it, you've done it, thanks!

maxsurguy () - 9 years ago - Reply 0