Skip to main content Skip to docs navigation
View on GitHub

Range

Use our custom range inputs for consistent cross-browser styling and built-in customization.使用我们的自定义范围输入实现一致的跨浏览器样式和内置自定义。

On this page本页内容

Overview概述

Create custom <input type="range"> controls with .form-range. 使用.form-range创建定制的<input type="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.由于只有Firefox支持从拇指的左侧或右侧“填充”他们的轨迹，以直观地指示进度，因此我们目前不支持它。

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

Disabled禁用

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.在输入上添加禁用的disabled属性，使其显示为灰色，并删除指针事件。

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

Min and max最大值和最小值

Range inputs have implicit values for min and max—0 and 100, respectively. 范围输入控件的min和max特性都具有隐式值，分别为0和100。You may specify new values for those using the min and max attributes.可以为使用max和max属性的对象指定新值。

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

Steps步长

By default, range inputs “snap” to integer values. 默认情况下，范围输入“捕捉”为整数值。To change this, you can specify a step value. 要更改此设置，可以指定step值。In the example below, we double the number of steps by using step="0.5".在下面的示例中，我们使用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">

Sass

Variables变量

$form-range-track-width:          100%;
$form-range-track-height:         .5rem;
$form-range-track-cursor:         pointer;
$form-range-track-bg:             $gray-300;
$form-range-track-border-radius:  1rem;
$form-range-track-box-shadow:     $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:             $gray-500;
$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;