将CSS样式应用于Chrome中的范围滑块将禁用值的动态更新

我遇到了一个奇怪的情况。我使用AngularJS根据视频中的当前位置动态设置范围滑块的位置。如果我只通过启用底部两个调用来设置拇指的样式，那么拇指将按照预期实时沿滑块移动。如果我像下面第一节那样设置输入[type=range]的样式，拇指不会动态移动，除非您将鼠标移到它上面

我尝试过其他CSS风格的范围输入，我从不同的网站上获取，每次都有相同的结果。这似乎只影响Chrome。最奇怪的是IE工作正常谁会想到？！使用样式化的滑块，拇指可以很好地移动

input[type="range"] //::-moz-range-track //::-ms-track
{
    outline:none;
    background: rgb(127, 183, 219);
    width: 130px;
    height: 6px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -wekkit-border-radius: 8px;
}

input[type="range"]::-webkit-slider-thumb// ::-moz-range-thumb ::-ms-thumb
{
    outline:none;
    -webkit-appearance:none !important;  
    width:20px;
    height:20px;
    -webkit-appearance: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -wekkit-border-radius: 10px;
    border:1px solid rgba(127, 183, 219, 1.0);

    background: #FFF;

    -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
    -moz-box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
    box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);

 }

input[type="range"] ::-webkit-slider-thumb:hover// ::-moz-range-thumb:hover ::-ms-thumb:hover
{
    outline:none;
    -webkit-appearance:none !important;  
    width:22px;
    height:22px;
    -webkit-appearance: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -wekkit-border-radius: 10px;
    border: 1px solid rgba(127, 183, 219, 1.0);

    background: #FFF;

    -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
    -moz-box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
    box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
 }

---

编辑：我把范围缩小到-webkit外观：无。如果这一行在CSS中，样式可以工作，但滑块不会动态更新。在我的例子中，我试图让它在视频中显示用户的当前位置。此线程位于同一区域：