范围滑块-JavaScript未运行-错误

我在CodePen中创建了这个范围滑块。我想将代码保存在Atom中，以便以后在本地使用，但每当我尝试运行该程序时，我都会收到一个控制台错误，提示“uncaughtreferenceerror:$未定义”

我是JS/Jquery新手。有人能看看我的代码，让我知道为什么它会在codepen中运行，而不是从我的计算机本地运行吗

var-sizerage=[“11x17-起始价格-$19.99”，//将字符串存储在数组中
“24x36-起价-29.99美元”，
“70x90-起价-39.99美元”，
“120x50-起价-49.99美元”，
“67x18-起价-59.99美元”，
“19x30-起价-69.99美元”]
var imageUrl=新数组（）；//将图像存储在阵列中
imageUrl[0]='http://svgshare.com/i/1Ak.svg';
imageUrl[1]='http://svgshare.com/i/1AQ.svg';
imageUrl[2]='http://svgshare.com/i/1Bb.svg';
imageUrl[3]='http://svgshare.com/i/1Am.svg';
imageUrl[4]='http://svgshare.com/i/1CG.svg';
imageUrl[5]='http://svgshare.com/i/1By.svg';
$（'#sliderPrice'）.html（sizerage[0]）；
$（文档）.on（'input change'，'#range slider'，function（）{//侦听滑块更改（输入更改）
var v=$（this.val（）；//创建一个变量（v），并存储输入更改的值（例如，Image 2[imageURL]）
$（'#sliderStatus'）.html（$（this.val（））；
$（'#sliderPrice'）.html（sizerage[v]）；
$（“#img”）.prop（“src”，imageUrl[v]）；//根据滑块值修改Images属性src，并在imageUrl[v]内输入该值以显示图像
});
//范围滑块拇指：//
$（“#范围滑块”）。在（“mousedown”上，函数（）{//1。当用户在范围滑块上单击鼠标时
$（this）.removeClass（）.addClass（“thumb-down”）；//1.1从CSS中删除默认类，并添加该类。thumb-down（更改背景色）
$（this.addClass（“hover ring”）；//1.2从CSS中删除默认类，并添加class.hover ring（将框阴影更改为绿色）
});
$（“#范围滑块”）.on（“mouseup”，function（）{//2.当用户将鼠标移到范围滑块上时
$（this）.addClass（“thumb up”）；//2.1将thumb颜色更改回浅绿色
$（this）.addClass（“悬停铃声”）；//2.2删除框阴影
});
警报（“正在加载范围滑块脚本”）
@导入url（'https://fonts.googleapis.com/css?family=Roboto');
.产品系列包装{
显示：-webkit flex；
显示：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
最大宽度：600px；
保证金：0px自动；
/*外形：1px纯紫色*/
}
.产品范围块{
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
弯曲方向：行；
宽度：100%；
身高：100%；
/*轮廓：1px纯红*/
}
.参考高度块{
柔性生长：3；
/*背景色：红色*/
}
.尺寸图表块{
弹性增长：9；
/*背景颜色：绿色*/
}
.产品范围模块img{
宽度：90%；
/*轮廓：1px纯蓝色*/
}
#img{
宽度：100%！重要；
}
/*：范围滑块样式：范围滑块样式：范围滑块样式：*/
.范围滑块{
保证金：0px自动；
宽度：90%；
}
#范围滑块{
填充：40px 0px；
宽度：100%；
/*外形：1px纯绿色*/
}
/*删除范围滑块默认样式*/
输入[类型=范围]{
-webkit外观：无；
}
/*跟踪*/
输入[类型=范围]：-webkit滑块可运行轨迹{
高度：10px；
背景#d7d7d7；
边界：无；
边界半径：6px；
}
输入[类型=范围]：焦点{
大纲：无；
}
/*拇指*/
输入[类型=范围]：-webkit滑块拇指{
-webkit外观：无；
边界：无；
高度：30px；
宽度：30px；
边界半径：50%；
背景：#46947F；
利润上限：-9px；
过渡：盒影0.5s；
}
输入[类型=范围]：悬停：：-webkit滑块拇指{
箱形阴影：0.10pt rgba（190190,0.4）；
光标：指针；
}
/*JS风格*/
/*鼠标向下移动时，将拇指颜色更改为深绿色*/
输入[type=range]。拇指向下：：-webkit滑块拇指{
背景#316557；
}
/*鼠标悬停时将拇指颜色更改回浅绿色*/
输入[type=range]。竖起拇指：：-webkit滑块拇指{
背景：#46947F；
}
/*改变环的颜色为绿色*/
输入[类型=范围]。悬停环：：-webkit滑块拇指{
箱形阴影：0.06磅rgba（70148127,0.46）；
光标：指针；
}
输入[type=range]。悬停环退出：--webkit滑块拇指{
盒影：0点rgba（0,0,0,0）；
光标：指针；
}
/*输入值样式*/
#滑块计数{
保证金：0px自动；
宽度：100%；
填充：0px 20px；
文本对齐：居中；
}
#幻灯片价格{
字体系列：“Roboto”，无衬线；
字体大小：22px；
字号：600；
}
#滑块跨距{
字号：600；
颜色：红色；
}

横幅范围滑块
0
滑块值=0


我认为范围滑块在codepen中工作。这是因为在您的代码笔中包含了jQuery（什么是
$
），请确保在本地包含了对jQuery的引用。您可以在我的HTML文档中看到，我已经修复了它。我有错误的CDN链接。我把它换成了。。。