Range滑动条颜色分区问题

/*******************横条样式********************************************************/
    input[type='range'] {
        /*清除默认的样式的设置*/
        -webkit-appearance: none;
        /*未滑动的颜色*/
        background-color: #ddd;
        height: 20px;
        overflow: hidden;
        width: 400px;
    }
    /*轨道*/
    input[type='range']::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        height: 20px;
    }
    /*拖块的样式*/
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        background: #333;
        border-radius: 50%;
    /*滑过之后的颜色*/
        box-shadow: -210px 0 0 200px #15dc46;
        cursor: pointer;
        height: 20px;
        width: 20px;
        border: 0;
    }
    /*轨道*/
    input[type='range']::-moz-range-thumb {
        background: #333;
        border-radius: 50%;
        box-shadow: -1010px 0 0 1000px #39ea0c;
        cursor: pointer;
        height: 20px;
        width: 20px;
        border: 0;
    }
    input[type="range"]::-moz-range-track {
        background-color: #c70e0e;
    }
    /*进度条颜色*/
    input[type="range"]::-moz-range-progress {
        background-color: #37ea0c;
        height: 20px
    }
    input[type="range"]::-ms-fill-upper {
        background-color: #ddd;
    }
    input[type="range"]::-ms-fill-lower {
        background-color: #21e513;
    }
    /****************************************************滑块样式*/