CSS3滑塊值是CSS3的一個功能，可以用于創建互動式的滑塊，方便用戶進行數值調整。

/* 使用CSS3滑塊值 */
input[type=range] {
-webkit-appearance: none; /* 去除默認樣式 */
height: 10px;
background-color: grey;
border-radius: 5px;
/* 添加漸變色 */
background-image: linear-gradient(to right, #ff5f6d, #ffc371);
outline: none; /* 去除滑塊拖動時的邊框 */
/* 添加滑塊樣式 */
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
/* 添加圖標 */
background-image: url('slider-icon.png');
background-size: cover;
}
/* 控制滑塊拖動時的樣式 */
&::-moz-range-thumb {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
background-image: url('slider-icon.png');
background-size: cover;
}
}

在以上代碼中，我們定義了一個range類型的input元素，并對其進行樣式修改。我們使用了CSS3的偽類選擇器來為滑塊本身和滑塊拖動時的樣式添加樣式，應用了漸變色以及一個圖標，滑塊拖動時會有一定的陰影效果，更加真實。

通過這樣的樣式修改，我們可以方便地創建一個互動式的數值調節控件，使得用戶使用起來更加便利。