Why do I need to load JQuery in and it's associated code in an HTML Widget and not the document head?

I have a JQuery Mobile Slider which I want to load into an HTML Widget and then use in an AJAX style way to get data to and from the server. I have setup the widget with the following code:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.js"></script>
      <script language="javascript">
	$(".ui-slider").on('change', function(event) { 
    	var valuenow = $(this).find(".ui-slider-handle").attr("aria-valuenow");
	$( "#slider-1").on('slidestop', function( event ) {
   var slider_value=$("#slider-1").slider().val();
   alert('Value: '+slider_value);

	$.getJSON("/show_submit", { "value":slider_value }, function( data ){
<input type="range" name="slider" orient="vertical" id="slider-1" value="0" min="0" max="100" />

This works but what I don’t understand is why I need to reference JQuery and create my callback scripts in the HTML Widget. Why does it not work when I load the JQuery links or run the script from the file head? Is there some other place I can put this JQuery initialization where it can be re-used?

It looks like each HTML Widget is exported as a separate HTML file.