自舉滑塊自定義句柄

我真的不明白爲什麼我不能設法用我自己的圖片替換原來的明星句柄。讓我們依靠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"); 
}

的網址背景鏈接到我想看作爲句柄的圖片。（替換默認星號）。

正如你可以在這裏看到：

低於亞歷山大的評論新圖片：似乎並沒有改變任何東西。

來源

2017-01-23 BoobaGump

滑蓋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; 
    }

根據您要使用的自定義手柄的大小，您可能必須對線高進行一些調整。

來源

2017-01-28 14:05:36 BoobaGump

所以，如果你實例化的滑塊，那麼所有你需要做的是改變你的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;*/ 
}

來源

2017-01-23 15:21:25

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

您應該重寫之前

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

來源

2018-03-06 15:37:16

自舉滑塊自定義句柄

回答

相關問題