CSS是一種非常常用的樣式語言，用于控制HTML頁(yè)面的樣式。本文將介紹如何使用CSS來改變滑塊豎直顯示。

首先，我們需要在HTML的元素上添加一些CSS樣式來改變滑塊的樣式和朝向。我們可以為該元素設(shè)置如下CSS屬性：

input[type=range]::-webkit-slider-thumb {
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg);
}
input[type=range]::-moz-range-thumb {
-moz-transform: rotate(90deg); /* Firefox */
transform: rotate(90deg);
}
input[type=range]::-ms-thumb {
-ms-transform: rotate(90deg); /* IE */
transform: rotate(90deg);
}

以上代碼中，我們使用了Webkit、Firefox和IE瀏覽器的CSS前綴來兼容不同瀏覽器。通過使用transform: rotate(90deg)這個(gè)樣式屬性來將滑塊旋轉(zhuǎn)90度，使其豎直顯示。

另外，如果我們需要同時(shí)改變滑塊的大小或顏色，可以為其添加如下CSS樣式：

input[type=range]::-webkit-slider-thumb {
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg);
width: 40px;
height: 40px;
background-color: #333;
}
input[type=range]::-moz-range-thumb {
-moz-transform: rotate(90deg); /* Firefox */
transform: rotate(90deg);
width: 40px;
height: 40px;
background-color: #333;
}
input[type=range]::-ms-thumb {
-ms-transform: rotate(90deg); /* IE */
transform: rotate(90deg);
width: 40px;
height: 40px;
background-color: #333;
}

以上代碼中，我們添加了width和height屬性來控制滑塊的大小，并添加了background-color屬性來改變滑塊的顏色。請(qǐng)注意，這些樣式屬性也需要使用不同瀏覽器的CSS前綴來兼容不同的瀏覽器。

在使用CSS改變滑塊豎直顯示時(shí)，請(qǐng)注意不同瀏覽器的兼容性，以確保頁(yè)面可以在不同瀏覽器中正確地顯示。此外，為了達(dá)到最佳效果，建議使用最新版本的瀏覽器。