今天继续了任务2

主要做的是滑块的CSS和JS部分

1. 首先更改了滑块的CSS

@mixin appearance ($none) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

试了一下效果，隐藏原有CSS效果才可以更改现存CSS效果

.range-bar::-webkit-slider-thumb {
  @include appearance (none);
  -webkit-box-shadow:0 0 2px;
  //增添滑块阴影
 width: 3rem;
  height: 1.8rem;
  background-image: url("task-image/range2.png");
  background-size: cover;
}

滑块可以直接使用背景图制作

2. 接下来是滑块和输入框联动的js部分

首先设置默认最大值最小值

滚动条范围

<input class="range-bar" id="slider" type="range" value="4" max="18" min="4" step="1" onchange="range_slide()">

人数框范围

<input type="text" id="member" value="4" max="18" min="4" onblur="change_member()">

两个按钮添加onclick事件，调用对应函数增减人数

遇到的问题

目前几个部分都是可用的，但是有时会失灵，没有发现bug在哪里，这是CSS部分

<div class="num-player">
    <div>
        <label>
            <span>玩家人数</span> <input type="text" id="member" value="4" max="18" min="4" onblur="change_member()"> <span>人</span>
        </label>
    </div>
     <div>
         <button class="btn" id="btnMinus" onclick="minus()">
             <img src="task-image/minus.png" style="padding-top: 4px">
         </button>
         <label>
             <input class="range-bar" id="slider" type="range" value="4" max="18" min="4" step="1" onchange="range_slide()">
         </label>
         <button class="btn" id="btnPlus" onclick="plus()">
             <img src="task-image/plus.png">
         </button>
     </div>
</div>

这是对应的js部分

var playerMember = document.getElementById("member");
var rangeNumber = document.getElementById("slider");

function change_member() {
    if (playerMember>=4 && playerMember<=18) {
        playerMember.value = rangeNumber.value;
    } else {
        alert("请输入正确的人数4~18");
        playerMember.value = 4;
        rangeNumber.value = 4;
    }
}
function range_slide() {
    playerMember.value = rangeNumber.value;
}

function minus() {
    rangeNumber.value--;
    playerMember.value = rangeNumber.value;
    if (playerMember<4) {
        alert("参与人数最少为4人yo~");
        playerMember.value = 4;
    } else {
        playerMember.value = rangeNumber.value;
    }
}
function plus() {
    rangeNumber.value++;
    playerMember.value = rangeNumber.value;
    if (playerMember>18) {
        alert("参与人数最多为18人yo~");
        rangeNumber = 18;
    } else {
        playerMember = rangeNumber;
    }
}

明天计划继续任务，争取早点做完，把bug改了

收获：如何更改滚动条默认样式，以及对js的函数调用等更加了解