Correct and idiomatic ways to use the <mds-input-range> component, ordered from most common to most specialized. Patterns assume a working knowledge of the shared component rules in agents/conventions.md.

Basic Slider with a Label

The minimum viable form. Put the field’s text label in the default slot - it is rendered in the header and used as the accessible name for the underlying input. The default range is 0-100 with a step of 1.

<mds-input-range name="volume">Volume</mds-input-range>

Setting min, max, and step

Constrain the range to a meaningful interval. Use step to enforce granularity - the component snaps the selected value to the nearest multiple automatically.

<!-- Percentage slider, 5-point increments -->
<mds-input-range name="completamento" min="0" max="100" step="5">Completamento (%)</mds-input-range>

<!-- Temperature slider, half-degree steps -->
<mds-input-range name="temperatura" min="16" max="30" step="0.5">Temperatura (C)</mds-input-range>

Pre-selected Value via value

Pass value to initialize the thumb at a specific position. The prop is reflected, so it also stays in sync when the user drags.

<mds-input-range name="priorita" min="1" max="10" value="7">Priorita</mds-input-range>

Listening to mdsInputRangeChange

The component emits mdsInputRangeChange with the new numeric value in event.detail whenever the committed value changes. Do not listen to the raw input or change events - they may not bubble out of shadow DOM as expected.

<mds-input-range id="rating" name="valutazione" min="1" max="5">Valutazione</mds-input-range>

<script>
  document.querySelector('#rating').addEventListener('mdsInputRangeChange', (event) => {
    console.log('Nuovo valore:', event.detail);
  });
</script>

Custom Value Display with formatValue

Supply a (value: number) => string function to formatValue to change how the current value is shown in the header label - for example to add a unit suffix, format as currency, or humanize byte counts. The underlying numeric value is not affected.

<mds-input-range id="prezzo" name="prezzo" min="0" max="10000" step="50">Prezzo massimo</mds-input-range>

<script>
  document.querySelector('#prezzo').formatValue = (v) =>
    v.toLocaleString('it-IT', { style: 'currency', currency: 'EUR' });
</script>

Disabled Slider

Set the boolean disabled attribute to prevent interaction. The component applies disabled visual tokens and clears the reported form value automatically. Do not use disabled="false" to re-enable - remove the attribute instead.

<mds-input-range name="soglia" min="0" max="100" value="40" disabled>Soglia (disabilitato)</mds-input-range>

Form Participation

<mds-input-range> is form-associated. Place it inside a <form> with a name attribute and the selected value is submitted automatically alongside other fields.

<form action="/impostazioni" method="post">
  <mds-input-range name="luminosita" min="0" max="100" value="75">Luminosita</mds-input-range>
  <mds-input-range name="contrasto" min="0" max="100" value="50">Contrasto</mds-input-range>

  <mds-button type="submit" label="Salva impostazioni" variant="primary" tone="strong"></mds-button>
</form>

Hiding the Header via ::part(header)

Use ::part(header) to hide the label-and-value header when the surrounding UI already provides that context - for example in a compact settings row where the label lives outside the component.

.slider-compatto mds-input-range::part(header) {
  display: none;
}

Styling Customization via CSS Custom Properties

Override the documented --mds-input-range-* custom properties on the host or a parent selector to change thumb and track appearance. Use the semantic color roles via rgb(var(--magma-<role>)) (agents/color.md) so dark mode and high-contrast work correctly. The thumb is drawn inside the track: keep --mds-input-range-thumb-size smaller than --mds-input-range-track-size (16px inside 24px by default).

.slider-brand mds-input-range {
  --mds-input-range-thumb-background: rgb(var(--magma-accent-emphasis-hover));
  --mds-input-range-track-progress-background: rgb(var(--magma-accent-emphasis-hover));
  --mds-input-range-track-background: rgb(var(--magma-wash-base));
  --mds-input-range-thumb-size: calc(var(--spacing) * 500);
  --mds-input-range-track-size: calc(var(--spacing) * 700);
}