Bootstrap-滑块自定义句柄

Question

真不明白为什么不能用自己的图代替原来的星柄。就靠那个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

因此，如果您实例化了滑块，那么您需要做的就是更改 CSS

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

/* Or display content like unicode characters or fontawesome icons */
.slider-handle.custom::before {
  line-height: 20px;
  font-size: 20px;
  /* Comment this because you will not use star */
  /*content: '05'; /*unicode star character*/
  color: #726204;*/
}

Answer 2

改变这个：

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

对此：

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

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

Answer 3

你应该覆盖 slider-handle.custom::before

.slider-handle.custom::before {
      display:none
}

Bootstrap-滑块自定义句柄

Bootstrap-slider custom handle

css

jquery

twitter-bootstrap

bootstrap-slider