“If I take the code and put in the HTML/JS (linked in head)”
The problem is that you’ve put your code in the <head>, so it runs before the input elements have been parsed and so then $('input[type="range"]') finds no elements.
If you look at the “Frameworks & Extensions” options in JSFiddle, you’ll notice that it puts your JS code in an onload handler by default, so your code doesn’t run until the whole page has loaded. For the code to behave the same way on your own web page you’d need to wrap it in an onload handler of your own, or – since you’re using jQuery – wrap it in a document ready handler:
$(document).ready(function() {
// your code here
});
Or the short form is like this:
$(function() {
// your code here
});
Or include your script at the end of the page, so that it runs after the elements it tries to manipulate have been parsed.