COMPONENTS / ATOMS / al-range← ALL COMPONENTS

Range

<al-range><ALRange> REACTbeta

Reference generated from the custom elements manifest — 21 properties, 5 slots, 2 events.

PLAYGROUND7 CONTROLS

PREVIEW / al-range / SOUTHLEFT

Loading preview

FLAGS

ICON SLOTS

CODE — HTML / REACT

Guidance

NOT YET AUTHORED · 20 COMPONENTS COVERED

NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.

FIGMA PARITYNOT TRACKED

NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.

ACCESSIBILITYAXE 4.12.1

CHECKEVIDENCEDETAILRESULT

Default stateAXErange--DefaultPASS

Advanced statesAXE8 further storiesPASS

Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED

Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED

MEASURED 2026-09-08 · 9 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA

COLOR CONTRAST1 RULE FAILING

The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.

RULEWHEREELEMENTS

color-contrastElements must meet minimum color contrast ratio thresholdsrange--Disabled2

INSTALL@southleft/al-web-components/components/range

import '@southleft/al-web-components/components/range';
import { ALRange } from '@southleft/al-react';

API — 21 PROPS21 DOCUMENTED

PROPTYPEDEFAULT

hideLabelbooleanHide label? - If true, hides the label from displaying—

isErrorbooleanError state—

isDisabledbooleanDisabled attribute—

handleLabelUnitstringHandle label unit attribute—

minnumberMin property for range0

minSelectednumberMinselected property for range—

maxnumberMax property for range100

maxSelectednumberMaxselected property for range—

stepnumberStep for range1

hasOutputbooleanShows input value—

valuenumberInput value—

lowerRangeValuenumberInput value for lower range of range—

upperRangeValuenumberInput value for upper range of range—

labelstringSlide Label—

fieldNotestringField note text—

errorNotestringError note text—

ariaDescribedBystringAria described by - Used to connect the field note in select to the select menu for accessibility—

fieldIdstringThe unique id of the field—

namestringName attribute forwarded to the underlying `<input type="range">`. - Previously hardcoded to `"range"`, which silently overrode whatever the consumer submitted the field as.—

hasTooltipbooleanDisplays value label above range—

behavior'range'Behavior property for slide—

SLOTS5

SLOTDESCRIPTION

field-noteHelper text replacing the fieldNote property.

errorError text replacing the errorNote property.

labelIf content is slotted, it will override the default range label

beforeIf content is slotted, it will override the default range "min" label text

afterIf content is slotted, it will override the default range "max" label text

EVENTS2

EVENTDESCRIPTIONTYPE

onRangeDragFired continuously while the thumb is dragged. Prefer `onRangeOutputValueChange` for committed values; this one fires on every move.CustomEvent

onRangeOutputValueChangeFired when the range's output value changes. Detail: `{ value }`.CustomEvent

PUBLIC METHODS22

METHODDESCRIPTION

generateLinearGradient()function to sets the background style of default ranges when it is dragged

handleRangeRange()called when range-range is used. This function sets the position of min and maxselected and handles styling for labels.

checkEquality()function to set the position of labels when they become equal and handle z-index when they become equal.

upperRangeOnInput()called when upper range oninput event occurs i.e when the element gets user input

setUpperPercentageRangeLabel()sets the position of upper range label corresponding to value and add style to ranges correspondingly.

setLowerPercentageRangeLabel()sets the position of lower range label corresponding to value and add style to ranges correspondingly.

lowerRangeOnInput()called when user drags the lower range of range (the left-side range)

emitSlideEvent()function that dispatch event for ranges

emitOutputFieldEvent()Set the default / on load configuration for range-ranges

doubleRange()—

toggleZIndexonLowerRange()called when mouseup event happens for lower range. set the lower range label back to its original z-index and removes the z-index of lower-range

toggleZIndexonUppserRange()called when mouseup event happens for upper range. set the upper range label back to its original z-index and removes the z-index of upper-range

handleDefaulRangeChange()called when default range becomed active i.e when user drags the range.

updateValue()calculates percentage and update the value of range label ,sets its position and dispatch the value

checkValue()called when user sets the position of range using input-field. when the value is lesser than min , rest the value to min..and when it is greater than max, reset it to max

calculateValueOnStep()function to update the range value when step value greater than one is given

syncOutFieldToRangeField()update default range based on user-input from its corresponding input-field

syncOutFieldToLowerRange()update lower range (left-side-range) based on user-input from its corresponding input-field

syncOutFieldToUpperRange()update upper range (right-side-range) based on user-input from its corresponding input-field

setPercentageLabel()Dynamic styling on range as a percentage. sets the label value and sets the position of label

calculatePercentage()returns the percentage value.

renderRangeRange()returns the code of range

SOURCE — components/range/range.ts · Atoms/Form/Range