CSS拖動滑塊顯示文字的效果類似于滑動按鈕，將滑塊拖動到不同的位置，可顯示不同的文本內容。這種效果常被用于設置音量、亮度、字號等調節功能。

.slider {
width: 200px;
height: 20px;
background: #e0e0e0;
position: relative;
}
.slider::-webkit-slider-thumb {
width: 20px;
height: 20px;
background: #1e90ff;
border-radius: 50%;
position: relative;
z-index: 1;
-webkit-appearance: none;
margin-top: -10px;
}
.slider::-webkit-slider-runnable-track {
height: 10px;
background: #b3b3b3;
position: relative;
z-index: 0;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #1e90ff;
border-radius: 50%;
position: relative;
z-index: 1;
}
.slider::-moz-range-track {
height: 10px;
background: #b3b3b3;
position: relative;
z-index: 0;
}
.slider::-ms-thumb {
width: 20px;
height: 20px;
background: #1e90ff;
border-radius: 50%;
position: relative;
z-index: 1;
-webkit-appearance: none;
margin-top: -10px;
}
.slider::-ms-track {
height: 10px;
background: #b3b3b3;
position: relative;
z-index: 0;
}
.sliderOutput {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.sliderOutput:after {
content: attr(data-value);
display: block;
font-size: 16px;
font-weight: bold;
text-align: center;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}

在上述代碼中，通過設置偽元素的 content 屬性為 attr(data-value)，實現了滑塊拖動時文本內容的實時顯示。需要注意的是，由于 input[type=range] 默認樣式在不同瀏覽器中可能不同，因此需要對不同類型瀏覽器分別設置樣式。