To source

a-range

A customisable range slider element for selecting numeric values.

The a-range element is a fully styleable range slider for selecting numeric values within a defined range. It supports keyboard navigation, custom styling via CSS custom properties, and works as a form-associated element.

Usage

Basic Usage

<a-range value="0.5"></a-range>

With Min, Max and Step

<!-- Range from 0 to 100, stepping by 10 -->
<a-range min="0" max="100" step="10" value="50"></a-range>

Percentage Values (Default)

By default, the range operates from 0 to 1:

<a-range value="0.25"></a-range> <!-- 25% -->
<a-range value="0.5"></a-range>  <!-- 50% -->
<a-range value="0.75"></a-range> <!-- 75% -->

Listening to Value Changes

const range = document.querySelector('a-range');

range.addEventListener('input', (event) => {
  const { value } = event.detail;
  console.log('Current value:', value);
});

Reading the Value

const range = document.querySelector('a-range');

// As a number
console.log(range.valueAsNumber); // 0.5

// As the property
console.log(range.value); // 0.5

Disabled State

<a-range disabled value="0.5"></a-range>

Styling

The range slider is fully customisable via CSS custom properties:

a-range {
  /* Handle (the draggable circle) */
  --range-handle-background: #1d4ed8;
  --range-handle-size: 0.75rem;

  /* Progress bar (filled portion) */
  --range-progress-background: #1d4ed8;

  /* Track (unfilled portion) */
  --range-track-background: #e5e7eb;
  --range-track-height: 0.25rem;
  --range-track-padding: 0.5rem 0;

  /* Focus state */
  --range-outline-color: #3b82f6;
}

Themed Example

<style>
  .custom-range {
    --range-handle-background: #10b981;
    --range-progress-background: #10b981;
    --range-track-background: #d1fae5;
    --range-handle-size: 1rem;
    --range-track-height: 0.5rem;
  }
</style>

<a-range class="custom-range" value="0.6"></a-range>

CSS Parts

Style internal parts directly using ::part():

a-range::part(track) {
  border-radius: 0;
}

a-range::part(handle) {
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
PartDescription
trackThe background track element
handleThe draggable handle/thumb

Accessibility

  • Role: The element has role="slider" for screen reader compatibility.
  • ARIA Attributes: Automatically sets aria-valuemin, aria-valuemax, aria-valuenow, and aria-orientation.
  • Keyboard Navigation:
    • Focus is indicated with a visible outline
  • Disabled State: When disabled, aria-disabled="true" is set and interactions are blocked.

Range

A simple range slider component for a single value.

Example

<a-range value="0.5"></a-range>

Attributes

Name Type Default value Description
disabled boolean false

Disabled state of the range.
max number 1

Maximum value of the range.
min number 0

Minimum value of the range.
step number 0.01

Step value of the range.
value number 0

The current value of the range.

References