Jquery slider entered keyboard value works but though slider its not taking value

Question

Here is my code below...

    <script>
    $(function() {
     $( "#slider" ).slider({
            value:10,
            min: 1,
            max: 400,
            step: 1,
            slide: function( event, ui ) {
                               //Its setting the slider value to the element with id "amount"
                $( "#border_me" ).val( ui.value );
            }
        });
    });
    </script>

and my html code ..

<input id='border_me' class='border_width' value='66' />

Iam using the above slider to display some data from server page...well if i enter value using keyboard and hit enter or mouse click it works fine but its not taking the value from slider i see it in the value field slider value is getting updated unfortunately nothing happens if i press enter or mouse click.....what could be the issue?

Answer 1

You were changing the value in the input, but weren't actually applying that value. You need to listen for the value changing in the input then apply it.

jsFiddle

HTML

<input id='border_me' class='border_width' value='66' />
<div id="slider"></div>

JavaScript

$("#slider").slider({
    value: 10,
    min: 1,
    max: 400,
    step: 1,
    slide: function (event, ui) {
        //Its setting the slider value to the element with id "amount"
        $("#border_me").val(ui.value);
    }
});

$("#border_me").on('change', function () {
    $("#slider").slider("value", this.value);
});