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
• A styled thumb 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 step size.

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

Pair range inputs with a value display that updates dynamically so users can see the exact value they're selecting.

<div class="d-flex">
  <label for="rangeWithOutput" class="form-label">Temperature (°C)</label>
  <output for="rangeWithOutput" id="rangeOutput" class="ms-auto">22</output>
</div>
<input type="range" class="form-range" min="15" max="30" value="22" id="rangeWithOutput"
  oninput="rangeOutput.value = this.value">

Form layouts

Use Chassis CSS's grid and layout utilities to arrange range inputs alongside other form controls.

<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

• Always associate a visible <label> with the input using the for attribute so the control has an accessible name.
• Use aria-valuetext when the numeric value alone doesn't convey meaning to the user — for example, a satisfaction scale where 1 should be announced as "Very dissatisfied" rather than "1".
• Use aria-describedby to associate a .form-help element with the input when additional context is needed, so screen readers announce the description when the field receives focus.
• Pair range inputs with a visible value display (such as an <output> element) so sighted users can see the exact value while adjusting the slider.
• Range inputs are keyboard-navigable by default: arrow keys adjust by one step, and Home/End jump to the minimum and maximum values.

CSS

The Form Range component can be customized through Sass variables at compile time.

Custom properties

The Form Range component exposes CSS custom properties to control its appearance at runtime.

--form-range-track-color: #{$form-range-track-color};
--form-range-thumb-color: #{$form-range-thumb-color};
--form-range-thumb-disabled: #{$form-range-thumb-disabled};
--form-range-thumb-active: #{$form-range-thumb-active};
--form-range-thumb-width: #{$form-range-thumb-width};
--form-range-thumb-height: #{$form-range-thumb-height};
--form-range-thumb-border: #{$form-range-thumb-border};
--form-range-thumb-border-radius: #{$form-range-thumb-border-radius};
--form-range-thumb-box-shadow: #{$form-range-thumb-box-shadow};
--form-range-thumb-transition: #{$form-range-thumb-transition};
--form-range-track-width: #{$form-range-track-width};
--form-range-track-height: #{$form-range-track-height};
--form-range-track-border-radius: #{$form-range-track-border-radius};
--form-range-track-cursor: #{$form-range-track-cursor};
--form-range-track-box-shadow: #{$form-range-track-box-shadow};

Sass variables

The Form Range component uses Sass variables in scss/config/_defaults.scss to define its defaults; they are also exposed as CSS custom properties using the --cx- prefix for runtime override — $variable-name becomes --cx-variable-name. See the component anatomy page.

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

$form-range-track-box-shadow:               none; // var(--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:               var(--box-shadow-small);
$form-range-focus-ring-offset:              1px;
$form-range-thumb-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;