SO - 17287521

by Arun P Johny

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<p>
    <label for="amount">Value:</label> 
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />%
</p> 
<div id="slider-vertical" style="height: 15px; width:800px"></div>

<p>
    <input id="test" />
</p>

JavaScript

$(function () {
    $("#slider-vertical").slider({
        orientation: "horizantal", 
        range: "min", 
        min: 0, 
        max: 100, 
        value: 60,
        slide: function (event, ui){ 
            $("#amount").val(ui.value); 
        }
    });
    $("#amount").val($("#slider-vertical").slider("value"));
});

function UpdateSlider(PhaseInStatusReportVal) {
    $("#slider-vertical").slider("value", PhaseInStatusReportVal);
}

$(function(){
    $('#test').change(function(){
        UpdateSlider(this.value);
    })
})