jquery - Bootstrap-slider 自定义句柄

Question

我真的不明白为什么我不能用自己的照片来代替原来的星形 handle 。 让我们依靠那个plunker了解。 我读了author's documentation关于那件事:示例 10

在之前的 plunker 上，我按照上面写的那样做了:

HTML:

<input id="ex10" type="text" data-slider-handle="custom"/>

CSS:

.slider-handle.custom {
  background: transparent url("http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/128/Accept-icon.png");
}

链接到我想作为句柄查看的图片的 url 背景。 (替换默认星号)。

如您所见:

下面是带有 Alexander 评论的新图片: 似乎没有任何改变。

Answer 1

改变这个:

.slider-handle.custom::before {
  line-height: 20px;
  font-size: 20px;
  content: '\2605';
  color: #726204;
}

为此:

 .slider-handle.custom::before {
      line-height: 20px;
      font-size: 20px;
      content: "url-of-your-picture";
      color: #726204;
    }

您可能需要根据要使用的自定义句柄的大小对行高进行一些调整。