以下是原文翻译成繁體中文的版本，使用Markdown格式：
# Bootstrap - Range：初學者的全面指南
你好，有志於網頁開發的各位！今天，我們將深入一個令人興奮的話題，它肯定會滑進你的心裡——Bootstrap Range輸入。作為你友好的鄰居計算機老師，我將指導你走過這個旅程，一步步來。所以，拿起你喜歡的飲料，安頓下來，我們開始吧！
## Bootstrap Range是什麼？
在我們投入代碼之前，讓我們了解一下我們要處理的東西。Bootstrap Range是HTML5 `<input type="range">` 元素的定制版本。它讓用戶可以通過沿著條滑動控制器來從指定的範圍中選擇一個值。這就像你在音樂混合控制台上看到的那些滑動器的數字版本——很酷吧？
## 基本範例
讓我們從一個簡單的範例開始，讓我們的腳濕一下：
```html
<label for="customRange1" class="form-label">範例範圍</label>
<input type="range" class="form-range" id="customRange1">這段代碼創建了一個基本的範圍滑塊。《
當你運行這段代碼時，你會看到一個水平滑塊，用戶可以左右拖動來選擇一個值。默認情況下，範圍從0到100。
禁用的範圍
有時候，你可能想要顯示一個範圍滑塊，但防止用戶與之交互。這就是 disabled 屬性派上用場的地方：
<label for="disabledRange" class="form-label">禁用的範圍</label>
<input type="range" class="form-range" id="disabledRange" disabled>這個範例與我們的基本範例相似，但我們在 <input> 元素中添加了 disabled 屬性。這會將滑塊灰色並阻止用戶交互——當你想要顯示一個值但不允許更改時，這很完美。
最小和最大值
如果我們想要我們的滑塊代表一個特定的值範圍呢？這就是 min 和 max 屬性發揮作用的時候：
<label for="customRange2" class="form-label">範例範圍</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">在這個範例中，我們設置了 min="0" 和 max="5"。現在，我們的滑塊不再是默認的0-100範圍，而是從0到5。這對於當你需要對值範圍進行更精確控制時非常棒。
步驟
有時候，你可能希望你的滑塊以特定的增量移動。這就是 step 屬性的作用：
<label for="customRange3" class="form-label">範例範圍</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">在這裡，我們在我們之前的範例中添加了 step="0.5"。這意味著滑塊將以0.5的增量移動。所以，可能的值會是0、0.5、1、1.5，等等，一直到5。
組合所有：一個實際的範例
現在我們已經介紹了基礎知識，讓我們創建一個更複雜的範例，結合我們學到的所有東西：
<div class="container mt-5">
<h2>披薩尺寸選擇器</h2>
<label for="pizzaSize" class="form-label">選擇你的披薩尺寸（英寸）</label>
<input type="range" class="form-range" min="8" max="18" step="2" id="pizzaSize">
<p>選擇的尺寸： <span id="sizeDisplay">13</span> 英寸</p>
</div>
<script>
const pizzaSize = document.getElementById('pizzaSize');
const sizeDisplay = document.getElementById('sizeDisplay');
pizzaSize.addEventListener('input', function() {
sizeDisplay.textContent = this.value;
});
</script>在這個範例中，我們創建了一個披薩尺寸選擇器。讓我們分解一下：
- 我們使用了一個範圍輸入，
min="8"，max="18"和step="2"。這允許用戶從8到18英寸選擇偶數尺寸的披薩。 - 我們添加了一個
<p>元素來顯示選擇的尺寸。 - 我們包括了一些JavaScript來實時更新顯示的尺寸，當用戶移動滑塊時。
當你運行這段代碼時，你會看到一個讓用戶選擇披薩尺寸的滑塊，並且選擇的尺寸會在滑塊下方即時更新。這就像在數字披薩店一樣！
結論
好了，各位！我們已經通過Bootstrap Range輸入的基本知識。從簡單的滑塊到複雜的互動範例，現在你有了將滑動魔法添加到你的網頁項目的工具。
記住，熟能生巧。嘗試創建你自己的範圍輸入，試驗不同的最小、最大和步驟值，看看你能想出什麼。也許是一個音樂播放器的音量控制？或者是一個遊戲的難度設定？可能性無限！
快樂編程，願你的範圍總是滑動順暢！
| 方法 | 描述 |
|---|---|
min |
設置或返回範圍輸入的最小值 |
max |
設置或返回範圍輸入的最大值 |
step |
設置或返回範圍輸入的步驟間隔 |
value |
設置或返回範圍輸入的值 |
disabled |
設置或返回範圍輸入是否禁用 |
addEventListener() |
為範圍輸入附加事件處理器 |
removeEventListener() |
從範圍輸入中移除事件處理器 |
Credits: Image by storyset