Connecting Sliders To Number Inputs

How to connect the jQuery slider widget to the number HTML input element.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/cupertino/jquery-ui.css">
<input class="ui-widget ui-corner-all ui-widget-content"
       name="percent"
       type="number"
       min="0"
       max="200" />

CSS

body {
    margin: 2em;
    font-size: 0.8em;
}

div {
    width: 20%;
    margin-top: 0.4em;
    
}

JavaScript

var $input = $( '[name="percent"]' ).on({
    input: function( e ) {
        var $input = $( e.currentTarget );
        $input.next()
            .slider( 'value', $input.val() );
    }
});

$( '<div/>' ).insertAfter( $input )
    .slider({
        min: +$input.prop( 'min' ),
        max: +$input.prop( 'max' ),
        stop: function( e, ui ) {
            $input.val( ui.value );   
        }
});