范围

概述

¥Overview

使用 .form-range 创建自定义 <input type="range"> 控件。轨道（背景）和拇指（值）的样式在浏览器中显示相同。由于只有 Firefox 支持从拇指左侧或右侧进行 “filling” 轨迹作为直观指示进度的方式，因此我们目前不支持它。

¥Create custom <input type="range"> controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

禁用

¥Disabled

在输入上添加 disabled 布尔属性，使其渲染灰色外观、删除指针事件并防止聚焦。

¥Add the disabled boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

最小值和最大值

¥Min and max

范围输入分别具有 min 和 max—0 和 100 的隐式值。你可以为使用 min 和 max 属性的值指定新值。

¥Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

步骤

¥Steps

默认情况下，范围输入 “snap” 为整数值。要更改此设置，你可以指定 step 值。在下面的示例中，我们使用 step="0.5" 将步数加倍。

¥By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

CSS

Sass 变量

¥Sass variables

$form-range-track-width:          100%;
$form-range-track-height:         .5rem;
$form-range-track-cursor:         pointer;
$form-range-track-bg:             var(--#{$prefix}secondary-bg);
$form-range-track-border-radius:  1rem;
$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset);

$form-range-thumb-width:                   1rem;
$form-range-thumb-height:                  $form-range-thumb-width;
$form-range-thumb-bg:                      $component-active-bg;
$form-range-thumb-border:                  0;
$form-range-thumb-border-radius:           1rem;
$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1);
$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow;
$form-range-thumb-focus-box-shadow-width:  $input-focus-width; // For focus box shadow issue in Edge
$form-range-thumb-active-bg:               tint-color($component-active-bg, 70%);
$form-range-thumb-disabled-bg:             var(--#{$prefix}secondary-color);
$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;