The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.

Props

disableddisabledbooleanSets if the component is disabled

namestringIs needed to reference the form data after the form is submitted

maxnumberThe greatest value in the range of permitted values

minnumberThe lowest value in the range of permitted values

stepnumberThe step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below.

valuenumberThe value attribute contains a number which contains a representation of the selected number.

Overview

The <mds-input-range> web component is the Magma Design System slider control for picking a single numeric value from a continuous interval. It wraps a native <input type="range">, adding a labelled header, a styled track with a live progress fill, form association, and value formatting.

Semantic Behavior

Form association: Inside a <form> the selected number is reported under name with no extra wiring. A form reset brings back the value of load, thumb and progress included, or the middle of the range when the markup sets no value, like a native input.Value clamping and snapping: On input the value is clamped into [min, max] and snapped to the nearest step increment, so the committed value is always valid even when set programmatically out of range.Decimal awareness: The number of decimal places is derived from step, letting fractional steps snap correctly; as on a native input, a step that is not a positive number, from the start or set later, falls back to the default step, 1.Disabled state: Blocks interaction and clears the reported form value while disabled. A disabled <fieldset> around the component does the same, as it does a native input.Emitted event: mdsInputRangeChange carries the new numeric value whenever value actually changes.Accessibility: The control takes its accessible name from the slotted label text.Default slot is the label: The default slot holds the field’s text label, rendered in the header alongside the formatted current value.

Properties & Visual Configurations

min / max / step define the permitted interval and granularity; step also controls how fractional values are snapped and how many decimals are preserved.value is the committed numeric selection, kept clamped and snapped - set it programmatically to move the thumb.formatValue is a function (value: number) => string for presentation only: use it to render the header value as currency, a percentage, or a unit-suffixed label without changing the underlying numeric value. This component does not use the shared variant / tone ladders (agents/variants.md); appearance is tuned through the documented CSS custom properties (thumb and track colors and sizes) listed in AGENTS.md.

Dependencies

Uses: mds-text