前面师兄回答的挺不错的。

这里我就不给你提供代码了，给你提供一下思路。

滑动条和文本框 是2个Input

获取这2个Input的节点

取值应该明白了把value

先做第一步，让文本框的数值和滑动条关联？怎么关联？核心思想:滑动条取值，文本框赋值给滑动条(这是一个触发事件，做完后。记得完善文本框，比如限制数字范围，限制输入类型）。

在做第二步，做完了文本框输入数值后滑动条会对应，是不是就等于滑动条滑动变值后文本框就会对应改变? 如果不能缺了那一步?(赋值不是互相对应的，这里要再做一次赋值，也就是将滑动条的值赋给文本框，这样就对应了。也同样是一个触发事件）

第三步：按钮？  跟前面做法异曲同工之妙，核心（for循环）。

如果思路有了不知道如何下笔，请看看师兄的代码然后思考理解！

html:

<div class="bottom-box">
    <input type="button" class="img7" onclick="btLeft()">
    <input type="range" id="rangeNumber" oninput="change()" name="change" value="4" min="4" max="18" step="1" >
    <input type="button" class="img8" onclick="btRight()">
</div>

css:

.bottom-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 70%;
    margin: .2rem auto 0 auto;
}
/*横条样式*/
input[type=range] {
    -webkit-appearance: none;/*清除系统默认样式*/
    width: 90%;
    height: 5px;/*横条的高度*/
    background-color: #fab344;
    outline: none;
    cursor: pointer;
}
/*拖动块的样式*/
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;/*清除系统默认样式*/
    width: .3rem;
    height: .2rem;
    background: url(../image/img9.png) no-repeat 0 0/cover;
    border: none;
    cursor: pointer;
}
.img7 {
    width: .2rem;
    height: .2rem;
    background: url(../image/img7.png) no-repeat 0 0/cover;;
    outline: none;
    border: none;
}
.img8 {
    width: .2rem;
    height: .2rem;
    background: url(../image/img8.png) no-repeat 0 0/cover;;
    outline: none;
    border: none;
}

js:

var inputNumber = document.getElementById("inputNumber");
var rangeNumber = document.getElementById("rangeNumber");

//玩家人数的输入框与滚动条同步
function getNumber(){
    if(inputNumber.value>=4&&inputerNumber.value<=18){
        inputNumber.value=rangeNumber.value;
    }
    else{
        alert("请输入玩家人数");
    }
}
//滚动条改变玩家人数随着改变
function change(){
    inputNumber.value=rangeNumber.value;
}
//减号按钮与滚动条同步
function btLeft(){
    rangeNumber.value--;
    if(inputNumber.value<=4) {
        alert("人数不足，请凑好再来");
    }
    else{
        inputNumber.value=rangeNumber.value;
    }
}
//加号按钮与滚动条同步
function btRight(){
    rangeNumber.value++;
    if(inputNumber.value>=18) {
        alert("人数太多，请分开游戏");
    }
    else{
        inputNumber.value=rangeNumber.value;
    }
}

前面师兄提供的思路不错，这里我再给另一种解决思路。只需要一个input表单就可以实现，用到的是input一个新增的属性range,就可以做出一个样板出来，但是需要注意一点，这个原版的滑动条就和我们CSS-10做单选框一样，自带的样式非常丑，所以我们需要隐藏掉这个自带的样式，用CSS自己写。具体思路就是用到input::slider-thumb 和 input::slider-runnable-track来做出滑轨和滑块的样式。

至于左右加减的动作，你可以先用CSS画出两个+ -框框，然后添加点击函数，当点击+的时候，input的value值就增加，反之减少。注意需要加入监听来保证数值的同步变化

滑动条使用input的range样式实现，修改默认样式就可以了，关联可以参考如下