8 Bootstrap Component - Progress Complete Slider

git: https://github.com/juanmendez/bootstrap-slider created by Juan Mendez

by bizamajig

HTML

<link rel="stylesheet" href="http://getbootstrap.com/assets/css/docs.css">
<script src="http://juanmendez.info/source/library/jqueryui/jquery-ui-1.10.3.mouse_core.js"></script>
<script src="http://juanmendez.info/source/library/jqueryui/jquery.ui.touch-punch.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://juanmendez.info/source/tutorial/bootstrap/slider/bootstrapslider.min.js"></script>
<div class="bs-example">
    <div class="progress" data-slider="true">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" role="progressbar" class="progress-bar progress-bar-warning">
        </div>
    </div>
    <div class="alert alert-success">hello world</div>

    <div class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="progress-value">Email Value</label>
            <input type="number" id="progress-value" min="0" max="100" class="form-control" placeholder="enter value">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </div>

</div>

CSS

.bootstrap-slider{
            display:block; 
            width:80px; 
            height:20px; 
            background-color:darkred; 
            position:relative;
        }

JavaScript

$(function(){
    
    //for jsfiddle so its mobile friendly.
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');
    
    //declare as $vars elements from html
    var $alert = $($(".alert")[0]);
    var $p = $($(".progress")[0]);
    var $b = $($("[type='submit']")[0]);
    var $t = $($("#progress-value")[0]);

    //handle current sliding change
    $p.on( "sliderchange", function(e,result){
        $alert.html( "action: " + result.action + ", value: " + result.value );
    });
    
    //handle sliding when it reaches its max.
    $p.on( "slidercomplete", function(e,result){
        console.log( 'slider completed!' );
    });
    
    //for now click to update the slider via javascript.
    //progress bar aria-valuenow gets updated as well.
    $b.on( 'click', function(e){
        var value =  parseFloat( $t.val() );
        $p.slider( "option", "now", value );
        
        return false;
    });
});