CSS修改input[type=range]滑块样式

/* 用有-webkit-这样的属性，要在-webkit-前定义标准属性。如下面的-webkit-box-shadow和-webkit-appearance */
    /* 轨道样式  下面的杠杠*/
    input[type="range"] {
      /*box-shadow: -5px 0px 0px #333;
      -webkit-box-shadow: 0 1px 0 0px #424242,
                          0 1px 0 #060607 inset,
                          0px 2px 10px 0px black inset,
                          1px 0px 2px rgba(0, 0, 0, 0.4) inset,
                          0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
      margin-top: 2px;/*好像只能用这个，用position会不能滑*/
      background-color: #1212dd;
      border-radius: 15px;
      width: 200px;
      height: 10px;
      appearance: div;
      -webkit-appearance: none;
     
    }
    /* 但是这里的-webkit-appearance和-webkit-box-shadow不需要在上一行定义标准属性，
       是因为::-webkit-slider-thumb是 type 为 range 的 input 标签内的一种伪类样式，用于设置             
       滑块的具体样式。 
       这里的标准属性就相当于是系统的内置属性了，吧。
    */
    /* 滑块样式  圆形*/
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      cursor: default;
      top: -5px;
      height: 25px;/*滑块大小*/
      width: 25px;
      transform: translateY(-2px);/*在y轴上数值微调  用来修改滑块和杆杆相对位置*/
      background: none repeat scroll 0 0 #f5f4f4;/*为什么要这样写？*/
      border-radius: 15px;/*圆角*/
      -webkit-box-shadow: 0 -1px 1px black inset;
    }

我算是小白，正处于一个青黄不接的阶段，用的360极速浏览器进行的调试。对于内核什么的不太了解，在CSS修改input[type=range]滑块样式的基础上进行使用和进行理解，大概就是这样的。

如果有错误欢迎指出。

效果是这样的