jQuery UI Max Range Slider (Programmatic Input)

jQuery UI Slider with an input that updates the slider handle

by jpcodes

HTML

<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css">
<input type="text" id="amount">
<div id="slider-range"></div>

CSS

#slider-range {
  width: 50%;
}

JavaScript

$( "#slider-range" ).slider({
		range: "max",
		min: 0,
		max: 217,
		value: 1,
		slide: function( event, ui ) {
    	$("#amount").val(ui.value);
		}
	});

	$("#amount").change(function() {
		$("#slider-range").slider('value',$(this).val());
	});