带有自定义拇指的范围'；我到不了音轨的尽头，CSS

我试图找出问题所在，但由于我不是css大师，我需要帮助

我有滑块，我尝试在

滑块拇指上设置自定义图像

问题是：
滑块拇指
最小和最大位置未到达范围末端：

这是我玩的一个演示：

-尝试自下而上移动拇指


这是一个代码（顺便说一句，我使用离子型）

有人能帮忙解决吗
 问题在于，当你旋转拇指时，它会保持其中心，不会到达轨迹的末端。如果你不旋转它，它就会旋转

最简单的方法是先旋转文件图像，然后再将其设置为range thumb的
背景图像

否则，您可以创建自定义拇指并将其移动到真正的隐藏光标后面。您可以看到一个示例（第二个范围）

<div class="aa-volume wm-volume-range range" style="position: absolute;top: 3rem;left: 0rem;">                            
                        <input type="range" name="volume"                                    
                               min="0" max="100" 
                               value="{{displayDevice.fan_volume.value}}" ng-model="displayDevice.fan_volume.value" integer
       style="max-width: 8rem;width: 8rem;min-width: 8rem;">                              
 </div>

.wm-volume-range.range {
  -ms-transform: rotate(-90deg);
  /* IE 9 */
  -webkit-transform: rotate(-90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
}
.wm-volume-range.range i.icon {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.wm-volume-range.range span {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.aa-volume input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
             width: 38px;
             height: 16px;

             border-radius: 0px;
             background-image: url('http://www.lesliesanford.com/vst/knobman/files/slider-thumbs/SimpleSliderThumb.png'),

             -webkit-gradient(
                 linear,
                 left top,
                 left bottom,
                 color-stop(1, #a1a1a1)
             );
             -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
             background-size: 48px 24px;
             background-repeat: no-repeat;
             background-position: 50%;

}