Javascript 如何基于范围滑块更改图像？

我正在复制此网页，但图像不会根据范围滑块进行更改 我的html代码是：

<div class="image mt-3 mb-3">
    <img src="../static/images/7.jpg" width="400" height="180">
    <img src="../static/images/8.jpg" width="400" height="180">
    <img src="../static/images/9.jpg" width="400" height="180">
</div>
<br>
<div class="rangeslider">
    <input type="range" min="1" max="3" value="3" class="myslider" id="sliderRange">
    <div class="row mt-3">
        <div class="col-4">
            <h6 class="display-6">Starting From Scratch</h6>
            <p id="demo"> I'm designing the room </p>
        </div>
        <div class="col-4">
            <h6 class="display-6">Somewhere in Between</h6>
            <p class="demo">I'm designing around a few pieces I already own</p>
        </div>
        <div class="col-4">
            <h6 class="display-6">Mostly Furnished</h6>
            <p class="demo">I want to put the finishing touches on my room</p>
        </div>
    </div>
</div>

从头开始
我正在设计房间
介于两者之间
我正在设计一些我已经拥有的作品
大部分家具
我想对我的房间进行最后的润色

我的JS代码：

<script> 
   var rangeslider = document.getElementById("sliderRange"); 
   var output = document.getElementById("demo"); 
   output.innerHTML = rangeslider.value; 
   rangeslider.oninput = function() { 
       output.innerHTML = this.value; 
  } 
</script> 

var rangeslider=document.getElementById（“sliderRange”）；
var输出=document.getElementById（“演示”）；
output.innerHTML=RangeSloider.value；
RangeSloider.oninput=函数（）{
output.innerHTML=this.value；
} 

我的CSS代码：

<style> 

.rangeslider{ 
    width: 50%; 
} 

.myslider { 
    -webkit-appearance: none; 
    background: #FCF3CF  ; 
    width: 50%; 
    height: 20px; 
    opacity: 2; 
   } 


.myslider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    cursor: pointer; 
    background: #34495E  ; 
    width: 5%; 
    height: 20px; 
} 


.myslider:hover { 
    opacity: 1; 
} 

</style> 

.rangeslider{
宽度：50%；
} 
myslider先生{
-webkit外观：无；
背景：#FCF3CF；
宽度：50%；
高度：20px；
不透明度：2；
} 
.myslider:：-webkit滑块拇指{
-webkit外观：无；
光标：指针；
背景#34495E；
宽度：5%；
高度：20px；
} 
.myslider:悬停{
不透明度：1；
} 

错误为：未捕获类型错误：无法读取null的属性“值”

---

你能说出我在代码中犯了什么错误吗？你的JS代码运行得太早了。DOM还没有准备好

将脚本标记移到页面末尾会有所帮助（如上面提到的@RyanSparks）。

您应该使用或将脚本标记移到正文标记的末尾之前

我正在更改style属性，但最好的方法是使用类来很好地扩展代码

window.addEventListener（'load'，function（）{
var rangeslider=document.getElementById（“sliderRange”）；
var images=document.getElementById（“幻灯片图像”）；
rangeslider.addEventListener（'input'，function（）{
对于（var i=0；i
.rangeslider{
宽度：400px；
保证金：0自动；
}
迈斯里德先生{
-webkit外观：无；
背景：#FCF3CF；
宽度：100%；
高度：20px；
不透明度：0.8；
边缘顶部：100px；
}
.myslider:：-webkit滑块拇指{
-webkit外观：无；
光标：指针；
背景#34495E；
宽度：33%；
高度：20px；
}
.myslider:悬停{
不透明度：1；
}
.形象{
位置：相对位置；
宽度：400px；
保证金：0自动；
}
.image>img{
位置：绝对位置；
显示：无；
}
.图像>图像可见，
.image>img：第一个孩子{
显示：块；
}
.sliderOutput>div{
保证金：5px；
宽度：120px；
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
}
.滑块输出h6，
.滑块输出p{
保证金：5px；
}



从头开始
我正在设计房间
介于两者之间
我正在设计一些我已经拥有的作品
大部分家具
我想对我的房间进行最后的润色

尝试将您的脚本标记移动到html文档的底部@Ryan I'm get error as Uncaught TypeError:无法将属性'innerHTML'设置为null您能帮助我吗滑动范围滑块时图像也没有改变如何实现@raf代码正常，但我应该将行中的三个文本类型设置为这里显示的只有图像应该更改，但您的代码中的文本正在更改，它没有以行格式显示@raf您能这样说吗？我必须将三个文本并排显示在一行中，但我应该更改图像