Variar

Use nossas entradas de intervalo personalizado para um estilo consistente entre navegadores e personalização integrada.

Nesta página

Visão geral

Crie <input type="range">controles personalizados com .form-range. A faixa (o plano de fundo) e a miniatura (o valor) são estilizadas para aparecer da mesma forma nos navegadores. Como apenas o Firefox suporta “preencher” sua faixa da esquerda ou direita do polegar como um meio de indicar visualmente o progresso, não oferecemos suporte no momento.

Exemplo de intervalo

html

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

Desabilitado

Adicione o disabledatributo booleano em uma entrada para dar uma aparência esmaecida, remover eventos de ponteiro e evitar o foco.

Faixa desativada

html

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

Mínimo e máximo

As entradas de intervalo têm valores implícitos para mine max— 0e 100, respectivamente. Você pode especificar novos valores para aqueles que usam os atributos mine .max

Exemplo de intervalo

html

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

Passos

Por padrão, o intervalo insere “snap” para valores inteiros. Para alterar isso, você pode especificar um stepvalor. No exemplo abaixo, dobramos o número de etapas usando step="0.5".

Exemplo de intervalo

html

<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

Variáveis

$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;