CSS自動滑塊是一種方便的UI元素，為用戶提供了友好的滑動和拖動體驗。下面我們將介紹一些常見的CSS自動滑塊素材。

/* 普通滑塊 */
.slider {
width: 300px;
height: 10px;
background-color: #ccc;
border-radius: 5px;
position: relative;
}
.slider:before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #666;
position: absolute;
top: -5px;
left: 0;
cursor: pointer;
}
/* 帶刻度的滑塊 */
.slider-with-mark {
width: 300px;
height: 30px;
background-color: #ccc;
border-radius: 5px;
position: relative;
}
.slider-with-mark:before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #666;
position: absolute;
top: -10px;
left: 0;
cursor: pointer;
}
.slider-with-mark:after {
content: "";
width: 1px;
height: 10px;
background-color: #666;
position: absolute;
top: 5px;
left: 10%;
}
.slider-with-mark .mark {
width: 1px;
height: 6px;
background-color: #666;
position: absolute;
top: 15px;
}
/* 其他滑塊 */
/* 這里可以自定義添加其他滑塊素材，如圓角矩形、圓形長條等 */

使用這些自動滑塊素材時，我們可以根據需求進行適當的修改，如改變尺寸、調整顏色、增加動畫效果等。同時，為了滿足更多的UI需求，我們也可以自行設計不同風格的自動滑塊素材。