Teko
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, eipeꞌa umi mbaꞌe ojehúva puntero rehegua ha ani hag̃ua oñecentra.
<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 max— 0ha 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;