Spinner & Slider Bound to Each Other & to a Progressbar v1

Spinner & Slider Bound to Each Other & to a Progressbar

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//jqueryui.com/resources/demos/external/jquery.mousewheel.js"></script>
<script src="//jqueryui.com/resources/demos/external/globalize.js"></script>
<script src="//jqueryui.com/resources/demos/external/globalize.culture.de-DE.js"></script>
<script src="//jqueryui.com/resources/demos/external/globalize.culture.ja-JP.js"></script>
<section id="donate">
    <div id="spin">
        <p>
            <label for="currency">Currency to donate</label>
            <select id="currency" name="currency">
                <option value="en-US">US $</option>
                <option value="de-DE">EUR €</option>
                <option value="ja-JP">YEN ¥</option>
            </select>
        </p>
        <p>
            <label for="spinners">Amount to donate:</label>
            <input id="spinners" name="spinners" value="0">
        </p>
    </div>
    <div id="range" class="range" name="range" value="0">
        <div id="rangeFill" class="rangeFill"></div>
        <!--anchor for button gets dynamically inserted here-->
    </div>
    	<h1 id="output" class="output">0
	</h1>

    <div id="progressBar1" class="progressBar">
        <div class="progressBarFill"></div>
    </div>
</section>

CSS

/*Progress Bar CSS*/
 body {
    font-family:'Trebuchet MS', Helvetica, Arial, Verdana, sans-serif;
}
#donate {
    position: relative;
    margin: 0 auto;
    width: 50%;
}
.output {
    width: auto;
    height: 40px;
    font-size: 2em;
    margin: 1em auto;
}
html body {
    font-size: 100%;
}
.progressBar {
    position: relative;
    padding: 3px;
    background: #e6e6e6;
    -moz-border-radius: 12px;
    /* Firefox */
    -webkit-border-radius: 12px;
    /* Webkit */
    border-radius: 12px;
}
.progressBarFill {
    font-family: arial;
    font-size: 3px;
    color: white;
    text-align: right;
    text-shadow: 0px 0px 2px #000;
    text-indent: 9999px;
    overflow: hidden;
    background: #00ff00;
    border: none;
    display: block;
    height: 20px;
    width: 0%;
    max-width: 100%;
    margin: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
/* Range Slider CSS */
 .range {
    width: 100%;
}
.range, .rangeFill, .ui-slider-range {
    background: #e6e6e6;
    border: none;
    display: block;
    height: 20px;
    margin: 0;
    -webkit-box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(255, 255, 255, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
.rangeFill, .ui-slider-range {
    background: #00ff00;
    position: absolute;
    top: 0;
    max-width: 100%;
    width: 0;
}
#donate #range a.ui-slider-handle {
    background: white;
    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -10px;
    -webkit-border-radius: 20px;
    -moz-border-radius:...

JavaScript

$(function () {
    var last = 0;
    $("#currency").change(function () {
        $("#spinners").spinner("option", "culture", $(this).val());        
    });

    //Spinner
    $("#spinners").spinner({
        min: 0,
        max: 100000,
        step: 0.001,
        start: 0,
        numberFormat: "N3",
        spin: function (event, ui) {
            // Spinner speak to Progress Bar Fill
            $(".progressBarFill").css("width", ui.value + "%");

            // Spinner update output 
            $(".output").html(spinners.value);

            // Spinner speak to range slider
            $("#range").slider("value", ui.value);

            // Spinner speak to range slider fill
            $( "#rangeFill" ).css( "width", ui.value + "%");
        }
    });

    //Range Slider		
    $("#range").slider({
        min: 0,
        max: 100,
        step: 1,
        start: 0,
        slide: function (event, ui) {
            // Slider speak to progress bar fill
            $( ".progressBarFill" ).css( "width", ui.value + "%");

            // Slider speak to range slider fill
            $("#rangeFill").css("width", ui.value + "%");

            // Slider bump spinner values
            $("#spinners").spinner("value", ui.value);


            //Slider update output
            $( ".output" ).html(spinners.value);

            last = ui.value;
        }
    });
});