滑塊上的自定義點，將填充整個背景除了導航欄

Question

我有這個點，填充與否（取決於放內圈id），我想用在滑動滑塊上。

#outer-circle { 
    height: 100px; 
    width: 100px; 
    position: relative; 

    border-radius: 50%; 
    padding: 100px; 

    background: #fff; 
    border: 15px solid red; 
    color: red; 
    text-align: center; 

    font: 32px Arial, sans-serif; 
} 

#inner-circle { 
    position: absolute; 
    background: red; 
    border-radius: 50%; 
    height: 250px; 
    width: 250px; 

    top: 50%; 
    left: 50%; 
    margin: -125px 0px 0px -125px; 
} 

這裏的jsfiddle： https://jsfiddle.net/thirtydot/dQR9T/2637/

我希望把它放在光滑的滑塊類+使其內部滑塊（不高於/低於它）

https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.css

任何人有想法如何做到這一點看起來像在圖片上？

在滑塊應爲文本指標（如「Profesjonalizm」），並在左邊那個紅色的SVG的事情。當然，導航欄不是該滑塊的一部分。

任何幫助將不勝感激！

Answer 1

將滑塊上方的導航欄放在絕對位置上，float：left在圓上。