Range Inputs

Overview

Range inputs provide an intuitive slider interface for selecting numeric values from a specified range. Chassis CSS enhances native <input type="range"> controls with the .form-range class, providing consistent styling and behavior across all modern browsers.

<label for="rangeExample" class="form-label">Basic range slider</label>
<input type="range" class="form-range" id="rangeExample">

The styling includes:

• A visually consistent track across all browsers
• Responsive thumb control that indicates the current value
• Proper focus states for keyboard navigation
• Support for Chassis CSS's theming system

Disabled state

Range inputs can be disabled with the disabled attribute. This applies a visually muted appearance, removes interactive behaviors, and prevents focus.

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

Range configuration

Customize range input behavior with attributes that control the slider's value boundaries and incrementation.

Min and max values

Range inputs default to a scale of 0 to 100. Use the min and max attributes to create custom ranges that better fit your application's needs.

<label for="customRange" class="form-label">Custom range (0-5)</label>
<input type="range" class="form-range" min="0" max="5" id="customRange">

Step increments

By default, range inputs snap to integer values. For finer control, specify a decimal step value to define the increment between values.

<label for="preciseRange" class="form-label">Range with 0.5 step increments</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="preciseRange">

Contextual usage

Integrate range inputs into practical UI patterns to enhance user experience and provide clear visual feedback.

With value display

For enhanced usability, consider pairing range inputs with value displays that update dynamically. This helps users understand the exact value they're selecting.

<div class="mb-medium">
<label for="rangeWithOutput" class="form-label">Temperature (°C)</label>
<div class="d-flex align-items-center gap-medium">
  <input type="range" class="form-range" min="15" max="30" value="22" id="rangeWithOutput"
    oninput="rangeOutput.value = rangeWithOutput.value">
  <output for="rangeWithOutput" id="rangeOutput" class="ms-small w-25">22</output>
</div>
</div>

Form layouts

Range inputs integrate seamlessly with Chassis CSS's form layouts and components. They can be used alongside other input types and properly align with form groups.

<div class="row g-medium">
<div class="medium:col-6">
  <label for="volumeRange" class="form-label">Volume</label>
  <input type="range" class="form-range" min="0" max="100" value="75" id="volumeRange">
</div>
<div class="medium:col-6">
  <label for="brightnessRange" class="form-label">Brightness</label>
  <input type="range" class="form-range" min="0" max="100" value="50" id="brightnessRange">
</div>
</div>

Accessibility considerations

When using range inputs, follow these best practices to ensure accessibility:

• Always include a descriptive <label> that explains the purpose of the control
• Consider adding aria-valuemin, aria-valuemax, and aria-valuenow attributes for enhanced screen reader support
• Use the form-help class to provide additional context or instructions below the range input
• Test keyboard navigation to ensure users can adjust values with arrow keys

CSS

This component is customized exclusively through Sass variables during compilation rather than exposed CSS custom properties.

Sass variables

These Sass variables control the component's appearance and can be modified in the project's variables file before compilation.

$form-range-track-color:                    var(--#{$prefix}default-bg-evident);
$form-range-thumb-color:                    var(--#{$prefix}primary-bg-idle);
$form-range-thumb-disabled:                 var(--#{$prefix}default-bg-disabled);
$form-range-thumb-active:                   var(--#{$prefix}primary-bg-press);

$form-range-track-box-shadow:               var(--#{$prefix}box-shadow-inset);
$form-range-track-width:                    100%;
$form-range-track-height:                   .5rem;
$form-range-track-cursor:                   pointer;
$form-range-track-border-radius:            1rem;

$form-range-thumb-width:                    1rem;
$form-range-thumb-height:                   $form-range-thumb-width;
$form-range-thumb-border:                   0;
$form-range-thumb-border-radius:            1rem;
$form-range-thumb-box-shadow:               0 .1rem .25rem #{to-opacity($black, .1)};
$form-range-thumb-focus-box-shadow:         0 0 0 $utility-pixel-1 $bg-main, $form-input-focus-box-shadow;
$form-range-thumb-focus-box-shadow-width:   $form-input-focus-width; // For focus box shadow issue in Edge
$form-range-thumb-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;