自举滑块自定义句柄

问题描述：

我真的不明白为什么我不能设法用我自己的图片替换原来的明星句柄。让我们依靠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"); 
}

的网址背景链接到我想看作为句柄的图片。（替换默认星号）。

正如你可以在这里看到：

低于亚历山大的评论新图片：似乎并没有改变任何东西。

滑盖handle.custom ::我没有看到你的DIV .slider-handle.custom。你需要＃ex10 {// css} –

它不会改变任何东西。我更新了另一张照片。 – BoobaGump

在这个例子中http://embed.plnkr.co/D3GJQn/preview star是伪元素 –

答

更改此：

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

根据您要使用的自定义手柄的大小，您可能必须对线高进行一些调整。

答

所以，如果你实例化的滑块，那么所有你需要做的是改变你的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: '\2605'; /*unicode star character*/ 
    color: #726204;*/ 
}

我做到了。你可以从plunker的最新截图中看到它。 – BoobaGump

答

您应该重写之前

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

自举滑块自定义句柄

相关推荐