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] 默认样式在不同浏览器中可能不同，因此需要对不同类型浏览器分别设置样式。