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

Question

var pos = document.getElementById("#myRange").value;
var slider = document.getElementById("#myRange")
var g1;
slider.oninput = function() {
if (pos < 50) {
g1 = ((pos / 50) * 33) + 33;
document.documentElement.style.setProperty('--Rval', g1 + '%');
console.log(pos);
console.log(g1);
}
}

:root {
--RVal: 33%;
--UVal: 66%;
}
#rural_container {
grid-row: 2/4;
grid-column: 1/2;
justify-self: center;
align-self: center;
width: 25vw;
height: 25vw;
border-radius: 50%;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) var(--Rval), #77B7D3 0);
border: 5px solid #77B7D3;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin-bottom: 3vw;
}
#rural {
width: 80%;
height: auto;
}
/* everything below here is not relevant to the problem */
.migration {
background-color: #FFF8EA;
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.slidecont {
width: 60%;
grid-row: 4;
grid-column: 1/4;
justify-self: center;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
z-index: 2;
overflow-x: visible;
}
.slideoverlay {
width: 60%;
grid-row: 4;
grid-column: 1/4;
justify-self: center;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: .125vw;
background: rgb(20, 20, 20);
overflow-x: visible;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 2vw;
width: 2vw;
border-radius: 10%;
transform: rotate(45deg);
background: rgb(20, 20, 20);
cursor: pointer;
}
#dot1 {
margin-left: 1vw;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgb(20, 20, 20);
}
#dot2 {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgb(20, 20, 20);
}
#dot3 {
margin-right: 1vw;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgb(20, 20, 20);
}
#suburban_container {
grid-row: 2/4;
grid-column: 2/3;
justify-self: center;
align-self: center;
width: 25vw;
height: 25vw;
border-radius: 50%;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 66%, #B4D676 0);
border: 5px solid #B4D676;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin-bottom: 3vw;
}
#suburban {
width: 70%;
height: auto;
}

<section class="migration">
<div class="slidecont">
<input type="range" min="0" max="100" value="0" step=".1" class="slider" id="myRange">
</div>
<div class="slideoverlay">
<div id="dot1"></div>
<div id="dot2"></div>
<div id="dot3"></div>
</div>
<div id="rural_container">
<img id="rural" src="images/rural.png" alt="">
</div>
<div id="suburban_container">
<img id="suburban" src="images/suburban.png" alt="">
</div>
</section>

我见过其他类似的问题，但没有找到完全适用于我的情况的东西。我有一个范围滑块，用于控制基本div中线性渐变的位置。这是我到目前为止的代码

CSS有点混乱，因为这是一个更大的开发中项目的一大块，我试图包括所有相关方面。所需的输出是渐变将在我拖动滑块时移动。忽略额外的数学。

最初，我使用：

:root {
--RVal: 33%;
--UVal: 66%;
}

建立 CSS 变量，这些变量在 javascript 函数中更改。我在这里有点超出我的范围，所以如果这是一个简单的错误，请原谅我。

Answer 1

• 您没有正确选择ID，您正在尝试使用其CSS选择器。 删除#

• VaRpos应位于函数内部，以便函数可用

var slider = document.getElementById("myRange")
var g1;
slider.oninput = function() {
var pos = document.getElementById("myRange").value;
if (pos < 50) {
g1 = ((pos / 50) * 33) + 33;
document.documentElement.style.setProperty('--Rval', g1 + '%');
}
}

:root {
--RVal: 33%;
--UVal: 66%;
}
#rural_container {
grid-row: 2/4;
grid-column: 1/2;
justify-self: center;
align-self: center;
width: 25vw;
height: 25vw;
border-radius: 50%;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) var(--Rval), #77B7D3 0);
border: 5px solid #77B7D3;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin-bottom: 3vw;
}
#rural {
width: 80%;
height: auto;
}
/* everything below here is not relevant to the problem */
.migration {
background-color: #FFF8EA;
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.slidecont {
width: 60%;
grid-row: 4;
grid-column: 1/4;
justify-self: center;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
z-index: 2;
overflow-x: visible;
}
.slideoverlay {
width: 60%;
grid-row: 4;
grid-column: 1/4;
justify-self: center;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: .125vw;
background: rgb(20, 20, 20);
overflow-x: visible;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 2vw;
width: 2vw;
border-radius: 10%;
transform: rotate(45deg);
background: rgb(20, 20, 20);
cursor: pointer;
}
#dot1 {
margin-left: 1vw;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgb(20, 20, 20);
}
#dot2 {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgb(20, 20, 20);
}
#dot3 {
margin-right: 1vw;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgb(20, 20, 20);
}
#suburban_container {
grid-row: 2/4;
grid-column: 2/3;
justify-self: center;
align-self: center;
width: 25vw;
height: 25vw;
border-radius: 50%;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 66%, #B4D676 0);
border: 5px solid #B4D676;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin-bottom: 3vw;
}
#suburban {
width: 70%;
height: auto;
}

<section class="migration">
<div class="slidecont">
<input type="range" min="0" max="100" value="0" step=".1" class="slider" id="myRange">
</div>
<div class="slideoverlay">
<div id="dot1"></div>
<div id="dot2"></div>
<div id="dot3"></div>
</div>
<div id="rural_container">
<img id="rural" src="images/rural.png" alt="">
</div>
<div id="suburban_container">
<img id="suburban" src="images/suburban.png" alt="">
</div>
</section>