Javascript 使用范围滑块调整线性渐变

var pos=document.getElementById（“#myRange”）.value；
var slider=document.getElementById（“#myRange”）
var g1；
slider.oninput=函数（）{
如果（位置<50）{
g1=（（pos/50）*33）+33；
document.documentElement.style.setProperty（'--Rval'，g1+'%'）；
控制台日志（pos）；
控制台日志（g1）；
}
}

：根目录{
--RVal:33%；
--UVal:66%；
}
#乡村集装箱{
网格行：2/4；
网格柱：1/2；
自我辩护：中心；
自对准：居中；
宽度：25vw；
高度：25vw；
边界半径：50%；
背景图像：线性梯度（180度，rgba（255，255，255，0），rgba（255，255，255，0）var（--Rval），#77B7D3 0）；
边框：5px实心#77B7D3；
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
对齐项目：居中；
利润底部：3vw；
}
#乡村的{
宽度：80%；
高度：自动；
}
/*下面的内容与问题无关*/
.迁移{
背景色：#FFF8EA；
宽度：100%；
高度：100vh；
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（4，1fr）；
}
.slidecont{
宽度：60%；
网格行：4；
网格柱：1/4；
自我辩护：中心；
高度：自动；
显示器：flex；
flex-flow：行nowrap；
证明内容：之间的空间；
对齐项目：居中；
z指数：2；
溢出x：可见；
}
.滑盖{
宽度：60%；
网格行：4；
网格柱：1/4；
自我辩护：中心；
高度：自动；
显示器：flex；
flex-flow：行nowrap；
证明内容：之间的空间；
对齐项目：居中；
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：.125vw；
背景：rgb（20,20,20）；
溢出x：可见；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
高度：2vw；
宽度：2vw；
边界半径：10%；
变换：旋转（45度）；
背景：rgb（20,20,20）；
光标：指针；
}
#dot1{
左边距：1vw；
宽度：10px；
高度：10px；
边界半径：50%；
背景：rgb（20,20,20）；
}
#dot2{
宽度：10px；
高度：10px；
边界半径：50%；
背景：rgb（20,20,20）；
}
#dot3{
保证金权利：1vw；
宽度：10px；
高度：10px；
边界半径：50%；
背景：rgb（20,20,20）；
}
#市郊集装箱{
网格行：2/4；
网格柱：2/3；
自我辩护：中心；
自对准：居中；
宽度：25vw；
高度：25vw；
边界半径：50%；
背景图像：线性梯度（180度，rgba（255，255，255，0），rgba（255，255，255，0）66%，#B4D676 0）；
边框：5px实心#B4D676；
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
对齐项目：居中；
利润底部：3vw；
}
#郊区的{
宽度：70%；
高度：自动；
}

• 您没有正确选择id，您正在尝试使用其css选择器。删除

  #

• var

  pos

  应位于函数内部，以便函数使用

var slider=document.getElementById（“myRange”）
var g1；
slider.oninput=函数（）{
var pos=document.getElementById（“myRange”）.value；
如果（位置<50）{
g1=（（pos/50）*33）+33；
document.documentElement.style.setProperty（'--Rval'，g1+'%'）；
}
}

：根目录{
--RVal:33%；
--UVal:66%；
}
#乡村集装箱{
网格行：2/4；
网格柱：1/2；
自我辩护：中心；
自对准：居中；
宽度：25vw；
高度：25vw；
边界半径：50%；
背景图像：线性梯度（180度，rgba（255，255，255，0），rgba（255，255，255，0）var（--Rval），#77B7D3 0）；
边框：5px实心#77B7D3；
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
对齐项目：居中；
利润底部：3vw；
}
#乡村的{
宽度：80%；
高度：自动；
}
/*下面的内容与问题无关*/
.迁移{
背景色：#FFF8EA；
宽度：100%；
高度：100vh；
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（4，1fr）；
}
.slidecont{
宽度：60%；
网格行：4；
网格柱：1/4；
自我辩护：中心；
高度：自动；
显示器：flex；
flex-flow：行nowrap；
证明内容：之间的空间；
对齐项目：居中；
z指数：2；
溢出x：可见；
}
.滑盖{
宽度：60%；
网格行：4；
网格柱：1/4；
自我辩护：中心；
高度：自动；
显示器：flex；
flex-flow：行nowrap；
证明内容：之间的空间；
对齐项目：居中；
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：.125vw；
背景：rgb（20,20,20）；
溢出x：可见；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
高度：2vw；
宽度：2vw；
边界半径：10%；
变换：旋转（45度）；
背景：rgb（20,20,20）；
光标：指针；
}
#dot1{
左边距：1vw；
宽度：10px；
高度：10px；
边界半径：50%；
背景：rgb（20,20,20）；
}
#dot2{
宽度：10px；
高度：10px；
边界半径：50%；
背景：rgb（20,20,20）；
}
#dot3{
保证金权利：1vw；
宽度：10px；
高度：10px；
边界半径：50%；
背景：rgb（20,20,20）；
}
#市郊集装箱{
网格行：2/4；
网格柱：2/3；
自我辩护：中心；
自对准：居中；
宽度：25vw；
高度：25vw；
边界半径：50%；
背景图像：线性梯度（180度，rgba（255，255，255，0），rgba（255，255，255，0）66%，#B4D676 0）；
边框：5px实心#B4D676；
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
对齐项目：居中；
利润底部：3vw；
}
#郊区的{
宽度：70%；
高度：自动；
}

---

有一个输入错误：

var pos=document.getElementById（“#myRange”）.value。。。这是简单的js，不是jQuery，通过名称调用id而不是css选择器：
var pos=document.getElementById（“myRange”）.value