Slider isn't working

Hi guys! my HTML slider with JS isn’t working. You can see the pen here.
It shows an error which is “Uncaught ReferenceError: $ is not defined”.
It will be great if you guys help me out!

You’re using jQuery, but haven’t added it to your pen. $ is shortcut for jQuery

how can I add jquery to my pan and also in .js file?

Settings=>js =>search CDN type jquery

You mean you want to add it locally?

I mean how can i make it work? I know a little about it. If you kindly tell me what exactly should i do it will be great!

  1. if you want to make it work on Codepen
    Using JavaScript Libraries
    (jQuery is a javascript library)

  2. if you want to use it locally (project on you PC/laptop) add CDN link to your index.html
    before closing body tag

<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8">
   //you code here

   //add jquery CDN
   <script src=""></script>

AND your script (js code)
           document.write("Hello, World!");
//or link to local file with your js code e.g. if it's in the same folder where your index.html is
    <script src="my_script.js"></script> 

Hope this helps, if not, please tell me what exactly you don’t understand

Thanks @Annestezia, It’s working in codepen but in my local environment it isn’t working:
scripts in html file:

scripts codes same as codepen(which is working fine):

But it shows error:(for your convenience I have hosted these HTML file and
js files in here

I hope you would fix this problem.

there’s a typo it your input id in .html it’s budgeT

1 Like

Thanks @Annestezia! Thanks for helping me. Thats why i love this community !

1 Like