<input type="range" name="range" id="range" min="4" max="18" step="1" value="8" autofocus="">

常用属性如下：

美化滑动控件，需要完成以下的五个步骤：

1. 去除系统默认的样式

这是美化滑动控件的第一步，这步操作是为了不使用原有的样式，使之后的自定义样式有效。代码如下所示，不过要注意的是对基于不同内核的浏览器，如Chrome, Safari, Opera和Firefox等，滑块要分别移除默认样式。

2. 给滑动轨道(track)添加样式

3 给滑块(thumb)添加样式

• 4. 根据滑块所在位置填充进度条；(JavaScript实现难度较大)
• 
  
• 5. 实现多浏览器兼容(CSS属性前缀)。

/*  滑动轨道样式*/
input[type=range] {
    width: 70%;
    /*   滑竿宽度   */
    margin: 0 1rem;
    /*     width: 73%; */
    height: 0.2rem;
    /* 滑杆高度     */
    -webkit-appearance: none;
    -moz-appearance: none;
    /*  滑杠也要移除默认样式    */
    background: linear-gradient(#fcc671, #fcc671) no-repeat;
    /*     background-size: 0% 100%; */
    outline: none;
    /*   去除轮廓   */
}

/* 滑块样式 */
input[type=range]::-webkit-slider-thumb {
    width: 62px;
    height: 38px;
    cursor: pointer;
   background: url("../img/setting-range.png");
    /*  滑块图片    */
    -webkit-appearance: none;
    -moz-appearance: none;
    /*  滑块也要移除默认样式    */
}

3.实现JavaScript的数组乱序将杀手和平民身份打乱，准备分配给1-N号玩家;

/*
 将杀手和平民身份打乱，准备分配给1-N号玩家身份
 */
var identifyShow = document.getElementById("identifyShow");
//获取显示玩家身份区域的值
var identifyGet = document.getElementById("identifyGet");
//获取点击设置按钮的值
var allPlayer;
var player = "";
identifyGet.onclick = function identifyGet() {
    player = "";
    //清空显示区域的元素
    var killer = [];
    //杀手数组的声明
    var civy = [];
    //平民数组的声明
    if (textNum.value >= 4 && textNum.value <= 8) {
        //不同人数范围设置不同的杀手数量
        killer.length = 1;
    } else if (textNum.value >= 9 && textNum.value <= 11) {
        killer.length = 2;
    } else if (textNum.value >= 12 && textNum.value <= 15) {
        killer.length = 3;
    } else if (textNum.value >= 16 && textNum.value <= 18) {
        killer.length = 4;
    } else {
        alert('人数不满足条件，请重新设置人数哦');
        //之前已经判断人数后，几乎不可能出现，但是为了保险起见
    }
    for (var i = 0; i < killer.length; i++) {
        //生成杀手数组
        killer[i] = "杀手";
    }
    for (var j = 0; j < textNum.value - killer.length; j++) {
        //生成平民数组 
        civy[j] = "平民";
    }

    //将杀手和平民的数组合并并将数组的顺序打乱后输出
    var all = killer.concat(civy);

    function randomSort(a, b) {
        return Math.random() > .5 ? -1 : 1;
    }

    all.sort(randomSort);
    //利用随机函数产生一个随机数字，再传入sort()取得随机打乱的数组
    console.log(all);
    for (var m = 0; m < all.length; m++) {
        //输出打乱的数组，即分配玩家身份，且在页面中显示
        if (all[m] == "杀手") {
            player += "<li><span></span>" + (m + 1) + "号" + "&nbsp;&nbsp;" + all[m] + "</li>";
        } else {
            player += "<li><i></i>" + (m + 1) + "号" + "&nbsp;&nbsp;" + all[m] + "</li>";
        }
        //         console.log(player);
        identifyShow.innerHTML = player;
        //设置显示区域的html
    }
    allPlayer = JSON.stringify(all);
    //使用json把js对象转换为字符串
    sessionStorage.all = allPlayer;
    //把字符串储存到缓存中
}
;