Question

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

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

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

这是我玩的演示：

DEMO - 尝试自下而上移动拇指

这是一个代码（BTW我使用Ionic）

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

}

有人可以帮忙解决吗？

Answer 1

问题在于，当你用rotate拇指时，它会保持中心位置并且不会到达轨道的尽头。如果您不旋转，则为works

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

自定义拇指的范围没有到达轨道的末尾，CSS

1 个答案: