靈活自定義隨意設定評分範圍，從滑塊到評分，全都隨心

##為什麼要有這功能
評分拉 Bar 功能能讓使用者透過拖動滑塊的方式，輕鬆選擇評分數值，這在許多互動式網站中非常實用。相比傳統的數字輸入框，拉 Bar 讓用戶更直觀地感受評分範圍，並可以迅速進行微調。無論是在產品評價、問卷調查，還是遊戲中的技能調整，這個功能都提供了便捷的用戶體驗。

##核心結構
評分拉 Bar 的主要結構是 元素，配合 type="range" 屬性來實現滑塊功能。它通常還會搭配 CSS 來設計滑塊的外觀、寬度、高度、以及不同狀態下的效果，如 hover、active 等。

##基本結構

<!-- HTML -->
<input class="slidecontainer" type="range" min="0" max="100" value="0">

min: 定義滑塊的最小值。
max: 定義滑塊的最大值。
value: 定義滑塊的初始值。

##主要功能
直觀評分體驗: 用戶可以拖動滑塊選擇評分，無需手動輸入數值。
即時反饋: 滑塊值可以即時顯示，讓用戶能看到即時的選擇結果。
靈活設定範圍: 通過 min 和 max 自定義評分範圍，適用於不同場景。
美觀設計: 滑塊外觀可以通過 CSS 進行高度自定義，與網站風格統一。

##注意事項
兼容性: 滑塊樣式可能會在不同瀏覽器中略有差異，需測試兼容性。
可訪問性: 確保拉 Bar 能被鍵盤和讀屏器等輔助工具正常使用，增加可訪問性。
數值顯示: 考慮在滑塊旁邊或下方顯示當前選擇的數值，讓用戶更加精確地知道自己的選擇。

##簡單範例應用

/* CSS */
<Style>
.slidecontainer {
    width: 100%; /* 滑塊寬度 */
}

input[type=range] {
    width: 100%; /* 設定滑塊本身的寬度為 100%，讓滑塊的範圍寬度與容器一致 */
    -webkit-appearance: none; /* 移除 Safari 等瀏覽器的預設滑塊外觀 */
    appearance: none; /* 移除所有瀏覽器的預設滑塊外觀 */
    height: 10px; /* 設定滑塊軌道的高度為 10px */
    background: #ddd; /* 設定滑塊軌道的背景顏色為淺灰色 (#ddd) */
    outline: none; /* 移除滑塊的預設外邊框，當點擊或聚焦時不顯示 */
    opacity: 0.7; /* 設定滑塊的透明度為 70%，讓它稍微透明 */
    transition: opacity .15s; /* 當透明度改變時，設定 0.15 秒的過渡效果 */
}

input[type=range]:hover {
    opacity: 1;/* 當滑鼠懸停在滑塊上時，將透明度變為 100%，顯示更清楚 */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; /* 移除滑塊手柄的預設外觀 */
    appearance: none; /* 移除所有瀏覽器的預設手柄外觀 */
    width: 20px; /* 設定滑塊手柄的寬度為 20px */
    height: 20px; /* 設定滑塊手柄的高度為 20px */
    background: #4CAF50; /* 設定滑塊手柄的背景顏色為綠色 */
    cursor: pointer; /* 當滑鼠懸停在手柄上時，顯示為手型圖標，表示可拖動 */
    border-radius: 50%; /* 將滑塊手柄設為圓形 */
}
</Style>

<!-- HTML -->
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="0" class="slider">
  /*min="0" 和 max="100" 定義滑塊的範圍，value="0" 是滑塊的初始值。*/
  <p>當前值: <span id="valueDisplay">0</span></p>
  /*顯示當前滑塊的值，並使用 <span id="valueDisplay"> 來動態更新數值顯示*/
</div>

<script>
  const slider = document.querySelector('.slider');
  const valueDisplay = document.getElementById('valueDisplay');
  
  slider.oninput = function() {
  /* slider.oninput：每當滑塊的值改變時觸發這個事件。*/
    valueDisplay.textContent = this.value;/* 每當滑塊被拖動時，動態更新顯示的值 */
  }
</script>