Ejupi contenido principal-pe Eike docs jeguatahápe

Eipuru ore entrada rango personalizado rehegua estilo navegador kurusu rehegua peteĩchaite ha personalización incorporada-pe g̃uarã.

Tembiecharã

Ejapo <input type="range">controles personalizados rehegua .form-range. Pe pista (fondo) ha pulgar (valor) mokõivéva oñembosakoꞌi ojehechauka hag̃ua peteĩchaite umi kundahára apytépe. Firefox añoite oipytyvõháicha “omyenyhẽ hag̃ua” ipista pulgar akatúa térã akatúa guive peteĩ tape ohechauka hag̃ua jehechahápe mba’éichapa oho, ko’áĝa ndoroipytyvõi.

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

Ñemonandi

Emoĩ disabledatributo booleano peteĩ entrada rehe omeꞌe hag̃ua chupe peteĩ jehechauka gris ha eipeꞌa hag̃ua umi mbaꞌe ojehúva puntero rehegua.

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

Min ha máx

Umi entrada rango rehegua oguereko valor implícito minha max0ha 100, rehegua. Ikatu emombe’u mba’ekuaarã pyahu umi oipurúvape g̃uarã umi atributo minha .max

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

Umi paso rehegua

Por defecto, umi entrada rango rehegua “snap” umi valor entero-pe. Kóva oñemoambue hag̃ua, ikatu emombe’u peteĩ stepmba’ekuaarã. Pe techapyrá oíva iguýpe, ñambohetave jey umi paso jaipurúvo 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 rehegua

Variables rehegua

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