css - 带有自定义拇指的范围未达到轨道结尾，CSS

我试图找出问题所在，但由于我不是CSS专家，因此需要帮助。

我有滑块，我尝试在slider-thumb上设置自定义图像。

问题是：slider-thumb最小和最大位置未达到范围的末尾：

这是我玩的一个演示：

DEMO-尝试使拇指自下而上



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

<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>

和CSS：

.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%;

}

有人可以帮助解决吗？

最佳答案

问题是，当您rotate拇指保持其中心并且没有到达音轨的尽头时。如果不旋转，则它works


最简单的方法是在将文件图像设置为范围拇指的background-image之前旋转文件图像。
否则，您可以创建一个自定义拇指并将其移动以跟随真实的隐藏光标。您可以看到示例here（第二个范围）。

关于css - 带有自定义拇指的范围未达到轨道结尾，CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38478004/