CSS滑動塊是Web開發中經常會用到的一個交互功能。通過拖動滑塊，我們能夠實現對一個數值的選擇，比如音樂播放器中的音量控制、視頻進度的調整等。而將滑動塊放在進度條上，可以更加直觀地表現出當前進度。

要實現這一效果，我們需要先創建一個進度條的容器，并在其中添加一個表示當前進度的元素。代碼如下：

<div class="progress">
<div class="current"></div>
</div>

接下來，我們在CSS中定義進度條的樣式。進度條的大小、顏色等可以根據實際需求自行設置。代碼如下：

.progress {
width: 200px;
height: 4px;
background-color: #ddd;
position: relative;
}
.current {
width: 50%;
background-color: #f00;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

現在我們已經實現了一個簡單的進度條。接下來，需要在進度條上放置滑動塊。我們可以使用CSS中的偽元素before和after來實現。

在滑動塊的樣式中，使用偽元素before和after分別創建一個圓形的按鈕，并用絕對定位將它們放在進度條的兩端。然后，定義滑動塊的大小、顏色等樣式即可，代碼如下：

.slider {
width: 20px;
height: 20px;
background-color: #fff;
border: 2px solid #f00;
border-radius: 50%;
position: absolute;
top: -9px;
left: -11px;
cursor: pointer;
}
.slider::before,
.slider::after {
content: "";
width: 10px;
height: 10px;
background-color: #f00;
border-radius: 50%;
position: absolute;
}
.slider::before {
top: -4px;
left: -4px;
}
.slider::after {
bottom: -4px;
right: -4px;
}

現在我們已經完成了滑動塊在進度條上的實現。但是這僅僅是最基本的樣式，我們還可以使用JavaScript來實現更豐富的交互效果。比如，在拖動滑塊時實時更新進度條的進度、顯示當前進度的數值等。這些功能可以使用JavaScript的事件監聽和DOM操作實現。

CSS滑動塊在進度條上的實現方式多種多樣，以上僅為一種示例。開發者可以根據自己的需求和審美觀念進行自由發揮。