Javascript Jquery范围滑块-低填充部分-如何使用背景色填充

我创建了这个范围滑块，我想用与示例图片中的蓝色类似的绿色填充滑块的“下部”部分

我已经尝试了在网上能找到的每一种技术。我读到Internet Explorer支持这类代码，但大多数现代浏览器都需要黑客来实现这一效果。我尝试了梯度技术，但对我来说似乎有点太粗糙了。没什么我试过的

有人知道一种简单的方法来填充下部填充部分吗？一定有办法的-

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

我设法在这里获得了一个工作版本：

var sheet=document.createElement（'style'），
$rangeInput=$（'.range'），
prefs=['webkit-slider-runnable-track'，'moz-range-track'，'ms-track']；
文件.正文.附件（页）；
var getTrackStyle=函数（el）{
var curVal=el.值，
风格=''；
对于（变量i=0；i

您可以使用webkit、firefox和ms track选项。但是，它们只能在兼容的浏览器上工作。
使用渐变来实现这一点是个好主意！我无法让它在我的范围滑块上工作。你能看一下吗？
var sheet = document.createElement('style'),
$rangeInput = $('.range'),
prefs = ['webkit-slider-runnable-track', 'moz-range-track', 'ms-track'];

document.body.appendChild(sheet);

var getTrackStyle = function (el) {
    var curVal = el.value,
        style = '';

    for (var i = 0; i < prefs.length; i++) {
        style += '.range::-' + prefs[i] + '{background: linear-gradient(to right, #34495e 0%, #34495e ' + curVal*20 + '%, #fff ' + curVal + '%, #fff 100%)}';
    }

    return style;
}

$rangeInput.on('input', function () {
    sheet.textContent = getTrackStyle(this);
});