Javascript JQuery-范围滑块问题-更改图像

我有以下问题：

• 我想添加一个范围滑块
• 通过移动触发器，应显示不同的图像

目标：

• 将2个范围滑块示例合并为一个
• 我想有第一个范围滑块的设计
• 但是使用第二个范围滑块的功能（更改图像的能力）

希望你能帮助我-干杯

。滑块{显示：内联块；垂直对齐：中间；位置：相对}。滑块。滑块水平{宽度：50%；高度：20px}。滑块。滑块水平。滑块轨迹{高度：5px；宽度：100%；边距顶部：-3px；顶部：50%；左侧：0；背景图像：线性渐变（到顶部，#D4D4 0%，#BDBD 100%）；
边界：0；
内容：''；
显示：块；
高度：5px；
左：0；
不透明度：1；
位置：绝对位置；
右：0；
顶部：10px；
过渡：高度。5s缓和，不透明度1s缓和；
z索引：-20；}.slider.slider-horizontal.slider-horizontal.slider-horizontal.slider-low、.slider.slider-horizontal.slider-horizontal.slider-horizontal.slider手柄{margin left:-10px}.slider.slider-horizontal.slider-tick.triangle，.slider.slider-horizontal.slider-handle.triangle{position:relative；top:50%；transform:translateY（-50%）；边框宽度：0 10px 10px 10px 10px；宽度：0；高度：0；边框底色：#2e6da4；边距顶部：0}。slider.slider-horizontal.slider.slider.slider-horizontal.slider滑块勾选容器{空白：nowrap；位置：绝对；top:0；顶部：0；左侧：0.slider.slider-horizontal.slider-tick标签容器{空白：nowrap；页边距顶部：20px}.slider.slider-horizontal.slider-tick标签容器.slider-tick标签{填充顶部：4px；显示：内联块；文本对齐：中心}.slider.slider-horizontal.slider-rtl.slider轨迹{左：初始；右：0}.slider.slider.slider-horizontal.slider，.slider.slider-horizontal.slider-rtl.slider句柄{margin left:initial；margin right:-10px}.slider.slider-horizontal.slider-rtl.slider tick容器{left:initial；right:0}.slider vertical{height:210px；width:20px}.slider slider.slider-vertical.slider轨迹{宽度：10px；高度：100%；左侧：25%；顶部：0}.slider slider.slider-ver{宽度：100%；左侧：0；顶部：0；底部：0}。滑块。滑块-垂直。滑块轨迹低，.slider。滑块-垂直。滑块轨迹高{宽度：100%；左侧：0；右侧：0}。滑块。滑块-垂直。滑块勾号。滑块勾号。滑块勾号。滑块。滑块-垂直。滑块手柄{margin top:-10px}。滑块。滑块-垂直。滑块勾号。三角形。滑块。滑块-垂直。滑块手柄。三角形{边框宽度：10px 0 10px 10px；宽度：1px；高度：1px；边框左侧颜色：#2e6da4；边框右侧颜色：#2e6da4；边框左侧：0；边框右侧：0}。滑块。滑块-垂直。滑块刻度标签容器{空白：nowrap}。滑块。滑块-垂直。滑块刻度标签容器。滑块刻度标签{填充左侧：4px}。滑块。滑块-垂直。滑块-rtl。轨迹滑块{left:initial；right:25%}.slider.slider-vertical.slider-rtl.slider选择{left:initial；right:0}.slider.slider-vertical.slider.slider-vertical.slider-rtl.slider句柄.三角形{边框宽度：10px 10px 10px 0}.slider vertical.slider-rtl.slider标签容器.slider标签{左侧填充：初始；右侧填充：4px}。滑块。禁用滑块。滑块手柄{背景图像：-webkit线性渐变（顶部，#DFDFDFDF 0，#bebebe 100%）；背景图像：-o-线性渐变（顶部，#dfdfdf 0，#BEBE 100%）；背景图像：线性渐变（底部，#DFDFDFDFDFDFDFDF 0，#BEBE 100%）；背景重复：重复-x；过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='.#ffdfdff'，endColorstr='.#ffbebebe'，GradientType=0）}slider.slider-disabled.滑块轨迹{背景图像：-webkit线性渐变（顶部，#E5E5 0，#E9E9 100%）；背景图像：-o线性渐变（顶部，#E5 0，#E9E9 100%）；背景图像：线性渐变（在底部，#e5e5 0，#e9e9 100%）；背景重复：repeat-x；过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr=''#ffe5e5 E5'，endColorstr='#ffe9e9'，GradientType=0）；光标：不允许}。滑块输入{显示：无}。滑块。工具提示。顶部{边距顶部：-36px}。滑块。工具提示内部{空白：nowrap；最大宽度：无}。滑块显示：隐藏}.滑块轨迹{位置：绝对；光标：指针；背景图像：-webkit线性渐变（顶部，#F5F5 0，#F9F9 100%）；背景图像：-o-线性渐变（顶部，#F5F5 0，#F9F9 100%）；背景图像：线性渐变（底部，#F5F5 0，#F9F9 100%）；背景重复：重复：x；过滤器：progid:DXImageTransform.Microsoft.gradient（StarColorStr='#fff5f5'，endColorstr='#fff9f9f9'，GradientType=0）；-webkit框阴影：插入0 1px 2px rgba（0,0,0,0.1）；框阴影：插入0 1px 2px rgba（0,0,0,0.1）；边框半径：4px}。滑块选择{位置：绝对；背景图像：-webkit线性渐变（顶部，#f9f9f9 0，#F5 100%）；背景图像：-线性渐变（顶部，#F59，#F50%）；背景图像：线性渐变（到底部，#f9f9f9 0，#F5F5 100%）；背景重复：repeat-x；过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#FFF9F9'，endColorstr='#FFF5F5'，GradientType=0）；-webkit框阴影：插入0-1px 0 rgba（0,0,0,0,0.15）；框阴影：插入0-1px 0 rgba（0,0,0,0.15）；-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框；边框半径：4px}。滑块选择。勾选滑块选择{背景图像：-webkit线性渐变（顶部，#8ac1ef 0，#82b3de 100%）；背景图像：-o线性渐变（顶部，#8ac1ef 0，#82b3de 100%）；背景图像：线性渐变（底部，#8ac1ef 0，#DE 100%）；背景重复：repeat-x；过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='.#ff8ac1ef'，endColorstr='.#ff82b3de'，GradientType=0）}.slider track low，.slider track high{位置：绝对；背景：透明；-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框；边框框；边框半径：4px}.slider手柄{位置：绝对；顶部：0；宽度：20px；高度：20px；
边框：2倍实心#fff；
博尔德
function changeslider(val) {
  $('#sliderStatus').html(val);
  $("#img").prop("src", imageUrl[val]);
}