indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

Range

For built-in customization and consistent cross-browser appearance, use our custom range inputs.

Overview #

With .form-range, developer can design own <input type="range"> controls. The thumb (the value) and track (the background) are both styled to look the same in all browsers. It is not supportable because only Firefox allows users to visibly show progress by "filling" their track from either the left or right of the thumb. 

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

Disabled #

To give an input a grayed-out appearance, stop pointer events, and prevent focusing, add the disabled boolean attribute. 

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

Min and max #

Range inputs come with implied minimum and maximum values of 0 and 100, respectively. By using the min and max properties, it is possible to define new values for them. 

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

Steps #

Range inputs "snap" to integer values by default. You can alter this by specifying a step value. By using step="0.5" in the example below, we double the number of steps. 

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

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;