CSS滑動條左右滑動是一種常用的交互方式，通常用于調(diào)節(jié)音量、進度等，在CSS中，我們可以使用input元素的type="range"屬性來創(chuàng)建滑動條。

我們需要一個HTML結(jié)構(gòu)來承載這個滑動條，可以使用一個div元素來包裹整個滑動條，并在其中放置一個input元素。

<div class="slider-container">
  <input type="range" min="0" max="100" class="slider">
</div>

我們可以使用CSS來美化這個滑動條，我們可以設(shè)置滑動條的寬度、高度、背景色等屬性，我們還可以添加一些交互效果，比如鼠標懸停時顯示當前值等。

.slider-container {
  width: 200px;
  height: 20px;
  background-color: #f0f0f0;
}
.slider {
  width: 100%;
  height: 100%;
  background-color: #666;
  position: relative;
  left: 0;
  transition: left 0.3s ease;
}
.slider:hover {
  left: -10px;
}

在上面的代碼中，我們使用了position: relative;屬性來讓滑動條可以左右移動，我們還使用了transition屬性來添加過渡效果，讓滑動條的移動更加平滑。

我們可以使用JavaScript來監(jiān)聽滑動條的移動事件，并獲取當前的值。

const slider = document.querySelector('.slider');
slider.addEventListener('change', function() {
  console.log(slider.value); // 輸出當前值
});

在上面的代碼中，我們使用addEventListener方法來監(jiān)聽滑動條的移動事件，并在控制臺中輸出當前的值，這樣，我們就可以實時獲取滑動條的當前值了。