Bootstrap Snippet Bootstrap Pricing Slider using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>
                <div class="col-sm-12">
                    <div id="slider"></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>
        </form>
    </div>
</div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 !important;
    z-index: 2 !important;
    width: 3.2em !important;
    height: 2.2em !important;
    cursor: default !important;
    margin: 0 -20px auto !important;
    text-align: center !important;  
    line-height: 30px !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
}
.ui-corner-all {
    /*border-radius: 20px;*/
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(document).ready(function () {
        $("#slider").slider({
            range: "min",
            animate: true,
            value: 1,
            min: 0,
            max: 1000,
            step: 10,
            slide: function (event, ui) {
                update(1, ui.value); //changed
            }
        });
        //Added, set initial value.
        $("#amount").val(0);
        $("#amount-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();
        /* commented
         $amount = $( "#slider" ).slider( "value" );
         $duration = $( "#slider2" ).slider( "value" );
         */
        $("#amount").val($amount);
        $("#amount-label").text($amount);
        $('#slider a').html('<label>' + $amount + '</label><div class="ui-slider-label-inner"></div>');
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Pricing Slider"
Bootstrap 3.1.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Bootstrap Pricing Slider" Bootstrap 3.1.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Bootstrap Pricing Slider"
Bootstrap 3.1.0 Snippet by ASDAFF