颤振范围滑块不移动

.slider {
    -webkit-appearance: none; /* 移除默认样式 */
    width: 100%; /* 设置宽度 */
    height: 15px; /* 设置高度 */
    border-radius: 5px; /* 圆角 */
    background: #d3d3d3; /* 背景颜色 */
    outline: none; /* 移除轮廓 */
    opacity: 0.7; /* 设置透明度 */
    -webkit-transition: .2s; /* 过渡效果 */
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1; /* 鼠标悬停时透明度 */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* 移除默认样式 */
    appearance: none;
    width: 25px; /* 滑块宽度 */
    height: 25px; /* 滑块高度 */
    border-radius: 50%; /* 圆形滑块 */
    background: #4CAF50; /* 滑块颜色 */
    cursor: pointer; /* 鼠标指针样式 */
}

document.querySelector('.slider').addEventListener('input', function(e) {
    console.log(e.target.value); // 输出滑块的当前值
    // 这里可以添加其他逻辑
});

.slider {
    transform: translateZ(0); /* 强制启用GPU加速 */
}