Bootstrap5 选择区间组件

Bootstrap 5 选择区间组件

学习如何使用Bootstrap 5的选择区间组件，创建灵活且直观的范围选择控件，用于各种数值选择场景。

开始学习
0 50 100
基础范围选择器 自定义样式 双滑块范围选择器 步长和标记 禁用状态 垂直方向 实际应用示例

基础范围选择器

使用.form-range类创建基础范围选择器。

基础范围选择器示例
0 50 100 
<label for="basicRange" class="form-label">基础范围选择器</label>
<input type="range" class="form-range" id="basicRange">
<div class="range-labels">
  <span>0</span>
  <span>50</span>
  <span>100</span>
</div>
带最小值和最大值的范围选择器
0 25 50 75 100 
<label for="minMaxRange" class="form-label">选择范围: <span id="minMaxValue" class="range-value">50</span></label>
<input type="range" class="form-range" id="minMaxRange" min="0" max="100" value="50">
<div class="range-labels">
  <span>0</span>
  <span>25</span>
  <span>50</span>
  <span>75</span>
  <span>100</span>
</div>

<script>
document.getElementById('minMaxRange').addEventListener('input', function() {
    document.getElementById('minMaxValue').textContent = this.value;
});
</script>

自定义样式

使用自定义CSS为范围选择器添加独特的样式。

彩色范围选择器
<!-- 主要颜色 -->
<label for="customRange1" class="form-label">主要颜色范围选择器</label>
<input type="range" class="form-range custom-range" id="customRange1" style="--bs-range-color: #6f42c1;">

<!-- 成功颜色 -->
<label for="customRange2" class="form-label">成功颜色范围选择器</label>
<input type="range" class="form-range custom-range" id="customRange2" style="--bs-range-color: #198754;">

<!-- CSS -->
<style>
.custom-range {
    --bs-range-color: #6f42c1;
}

.custom-range::-webkit-slider-thumb {
    background-color: var(--bs-range-color);
}

.custom-range::-moz-range-thumb {
    background-color: var(--bs-range-color);
}

.custom-range::-webkit-slider-track {
    background-color: var(--bs-range-color);
}

.custom-range::-moz-range-track {
    background-color: var(--bs-range-color);
}
</style>
带实时数值显示的范围选择器
70
静音 50% 最大 
<div class="range-container">
  <label for="valueRange" class="form-label">音量控制</label>
  <input type="range" class="form-range" id="valueRange" min="0" max="100" value="70">
  <div class="range-output" id="valueOutput" style="left: 70%;">70</div>
  <div class="range-labels">
    <span>静音</span>
    <span>50%</span>
    <span>最大</span>
  </div>
</div>

<script>
const valueRange = document.getElementById('valueRange');
const valueOutput = document.getElementById('valueOutput');

valueRange.addEventListener('input', function() {
    const value = this.value;
    const percent = (value / 100) * 100;
    valueOutput.textContent = value;
    valueOutput.style.left = `${percent}%`;
});
</script>

双滑块范围选择器

创建具有两个滑块的范围选择器，用于选择数值区间。

双滑块范围选择器示例
25
75
$0 $50 $100 
<label class="form-label">价格区间: <span id="priceMinValue" class="range-value">25</span> - <span id="priceMaxValue" class="range-value">75</span></label>
<div class="dual-range-container">
  <div class="dual-range-track"></div>
  <div class="dual-range-progress" id="priceProgress"></div>
  <input type="range" class="dual-range-input" id="priceMin" min="0" max="100" value="25">
  <input type="range" class="dual-range-input" id="priceMax" min="0" max="100" value="75">
  <div class="dual-range-min" id="priceMinOutput" style="left: 25%;">25</div>
  <div class="dual-range-max" id="priceMaxOutput" style="left: 75%;">75</div>
</div>

<script>
const priceMin = document.getElementById('priceMin');
const priceMax = document.getElementById('priceMax');
const priceMinValue = document.getElementById('priceMinValue');
const priceMaxValue = document.getElementById('priceMaxValue');
const priceMinOutput = document.getElementById('priceMinOutput');
const priceMaxOutput = document.getElementById('priceMaxOutput');
const priceProgress = document.getElementById('priceProgress');

function updatePriceRange() {
    const minVal = parseInt(priceMin.value);
    const maxVal = parseInt(priceMax.value);

    if (minVal > maxVal) {
        // 防止最小值超过最大值
        priceMin.value = maxVal;
        updatePriceRange();
        return;
    }

    priceMinValue.textContent = minVal;
    priceMaxValue.textContent = maxVal;
    priceMinOutput.textContent = minVal;
    priceMaxOutput.textContent = maxVal;

    const minPercent = (minVal / 100) * 100;
    const maxPercent = (maxVal / 100) * 100;

    priceMinOutput.style.left = `${minPercent}%`;
    priceMaxOutput.style.left = `${maxPercent}%`;
    priceProgress.style.left = `${minPercent}%`;
    priceProgress.style.width = `${maxPercent - minPercent}%`;
}

priceMin.addEventListener('input', updatePriceRange);
priceMax.addEventListener('input', updatePriceRange);
</script>

步长和标记

使用step属性控制范围选择器的步长，并添加标记以增强用户体验。

带步长的范围选择器
1星 2星 3星 4星 5星 
<label for="stepRange" class="form-label">评分: <span id="stepValue" class="range-value">3</span> 星</label>
<input type="range" class="form-range" id="stepRange" min="1" max="5" step="1" value="3">
<div class="range-labels">
  <span>1星</span>
  <span>2星</span>
  <span>3星</span>
  <span>4星</span>
  <span>5星</span>
</div>

<script>
document.getElementById('stepRange').addEventListener('input', function() {
    document.getElementById('stepValue').textContent = this.value;
});
</script>
带标记的范围选择器
<label for="marksRange" class="form-label">满意度: <span id="marksValue" class="range-value">一般</span></label>
<input type="range" class="form-range" id="marksRange" min="0" max="4" step="1" value="2" list="marks">
<datalist id="marks">
  <option value="0" label="非常不满意"></option>
  <option value="1" label="不满意"></option>
  <option value="2" label="一般"></option>
  <option value="3" label="满意"></option>
  <option value="4" label="非常满意"></option>
</datalist>

<script>
const marksRange = document.getElementById('marksRange');
const marksValue = document.getElementById('marksValue');
const marksLabels = ['非常不满意', '不满意', '一般', '满意', '非常满意'];

marksRange.addEventListener('input', function() {
    marksValue.textContent = marksLabels[this.value];
});
</script>

禁用状态

使用disabled属性禁用范围选择器。

禁用状态范围选择器示例
<label for="disabledRange" class="form-label">禁用状态的范围选择器</label>
<input type="range" class="form-range" id="disabledRange" disabled>

<div class="form-check form-switch mt-4">
  <input class="form-check-input" type="checkbox" id="enableRange">
  <label class="form-check-label" for="enableRange">启用范围选择器</label>
</div>

<script>
document.getElementById('enableRange').addEventListener('change', function() {
    document.getElementById('disabledRange').disabled = !this.checked;
});
</script>

垂直方向

创建垂直方向的范围选择器。

垂直范围选择器示例
值: 50

注意：垂直方向的范围选择器在某些浏览器中可能需要额外的CSS或JavaScript支持。

在实际项目中，可以考虑使用第三方库或自定义实现来获得更好的跨浏览器兼容性。

<label for="verticalRange" class="form-label">垂直范围选择器</label>
<input type="range" class="form-range" id="verticalRange" orient="vertical" style="height: 150px; width: 10px; margin: 0 auto; display: block;">
<div class="text-center mt-2">值: <span id="verticalValue">50</span></div>

<script>
document.getElementById('verticalRange').addEventListener('input', function() {
    document.getElementById('verticalValue').textContent = this.value;
});
</script>

实际应用示例

在实际项目中使用范围选择器的示例。

图片编辑器控件
图片调整
<div class="card">
  <div class="card-body">
    <h5 class="card-title">图片调整</h5>
    <div class="mb-3">
      <label for="brightnessRange" class="form-label">亮度: <span id="brightnessValue">50</span>%</label>
      <input type="range" class="form-range" id="brightnessRange" min="0" max="100" value="50">
    </div>
    <div class="mb-3">
      <label for="contrastRange" class="form-label">对比度: <span id="contrastValue">50</span>%</label>
      <input type="range" class="form-range" id="contrastRange" min="0" max="100" value="50">
    </div>
    <div class="mb-3">
      <label for="saturationRange" class="form-label">饱和度: <span id="saturationValue">50</span>%</label>
      <input type="range" class="form-range" id="saturationRange" min="0" max="100" value="50">
    </div>
    <button class="btn btn-primary mt-2">应用调整</button>
  </div>
</div>

<script>
// 更新亮度值显示
document.getElementById('brightnessRange').addEventListener('input', function() {
    document.getElementById('brightnessValue').textContent = this.value;
});

// 更新对比度值显示
document.getElementById('contrastRange').addEventListener('input', function() {
    document.getElementById('contrastValue').textContent = this.value;
});

// 更新饱和度值显示
document.getElementById('saturationRange').addEventListener('input', function() {
    document.getElementById('saturationValue').textContent = this.value;
});
</script>
产品筛选器
价格筛选
$0 $50 $100 
<div class="card">
  <div class="card-body">
    <h5 class="card-title">价格筛选</h5>
    <div class="mb-3">
      <label class="form-label">价格范围: $<span id="filterMinValue">20</span> - $<span id="filterMaxValue">80</span></label>
      <div class="dual-range-container">
        <div class="dual-range-track"></div>
        <div class="dual-range-progress" id="filterProgress"></div>
        <input type="range" class="dual-range-input" id="filterMin" min="0" max="100" value="20">
        <input type="range" class="dual-range-input" id="filterMax" min="0" max="100" value="80">
      </div>
      <div class="range-labels">
        <span>$0</span>
        <span>$50</span>
        <span>$100</span>
      </div>
    </div>
    <button class="btn btn-primary mt-2">应用筛选</button>
  </div>
</div>

<script>
const filterMin = document.getElementById('filterMin');
const filterMax = document.getElementById('filterMax');
const filterMinValue = document.getElementById('filterMinValue');
const filterMaxValue = document.getElementById('filterMaxValue');
const filterProgress = document.getElementById('filterProgress');

function updateFilterRange() {
    const minVal = parseInt(filterMin.value);
    const maxVal = parseInt(filterMax.value);

    if (minVal > maxVal) {
        filterMin.value = maxVal;
        updateFilterRange();
        return;
    }

    filterMinValue.textContent = minVal;
    filterMaxValue.textContent = maxVal;

    const minPercent = (minVal / 100) * 100;
    const maxPercent = (maxVal / 100) * 100;

    filterProgress.style.left = `${minPercent}%`;
    filterProgress.style.width = `${maxPercent - minPercent}%`;
}

filterMin.addEventListener('input', updateFilterRange);
filterMax.addEventListener('input', updateFilterRange);
</script>
上一章: 复选框和单选框 下一章: 输入框组