Common incorrect uses of <mds-input-range>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Use a Raw <input type="range"> Instead of the Component

Reaching for the native element bypasses the Magma-styled track, the progress fill, the labelled header, form association wiring, and the snapping logic.

<!-- INCORRECT -->
<label for="v">Volume</label>
<input type="range" id="v" name="volume" min="0" max="100">

<!-- CORRECT -->
<mds-input-range name="volume" min="0" max="100">Volume</mds-input-range>

Do Not Omit the Label Slot

Without slotted text the slider has no accessible name - screen readers cannot announce the control’s purpose. Always put a meaningful text label in the default slot.

<!-- INCORRECT -->
<mds-input-range name="luminosita" min="0" max="100"></mds-input-range>

<!-- CORRECT -->
<mds-input-range name="luminosita" min="0" max="100">Luminosita</mds-input-range>

Do Not Use disabled="false" to Enable the Slider

Stencil reads "false" as false and, since disabled is reflected, removes the attribute at the first render, so this happens to work; but the markup says the opposite of what it does, and on a prop that is not reflected the attribute stays in the DOM, where [attr] selectors still match it. Remove the attribute entirely to enable it.

<!-- INCORRECT -->
<mds-input-range name="soglia" disabled="false">Soglia</mds-input-range>

<!-- CORRECT -->
<mds-input-range name="soglia">Soglia</mds-input-range>

Do Not Listen to Raw input / change Events

Native events may not bubble out of shadow DOM the way you expect. Listen to mdsInputRangeChange, which the component emits on every committed value change.

<!-- INCORRECT -->
<mds-input-range id="r" name="valore">Valore</mds-input-range>
<script>
  document.querySelector('#r').addEventListener('change', (e) => {
    console.log(e.target.value); // unreliable across shadow DOM
  });
</script>

<!-- CORRECT -->
<mds-input-range id="r" name="valore">Valore</mds-input-range>
<script>
  document.querySelector('#r').addEventListener('mdsInputRangeChange', (e) => {
    console.log(e.detail); // numeric value, always reliable
  });
</script>

Do Not Set step to Zero or a Negative Number

A step of zero or negative is invalid: as on a native input it is ignored and the default step, 1, applies instead, which is rarely the granularity you meant. Use a positive integer or decimal.

<!-- INCORRECT -->
<mds-input-range name="q" step="0">Quantita</mds-input-range>
<mds-input-range name="q" step="-1">Quantita</mds-input-range>

<!-- CORRECT -->
<mds-input-range name="q" step="1">Quantita</mds-input-range>

Do Not Pierce the Shadow DOM to Style the Track or Thumb

The component exposes ::part(header) and ::part(track) plus the --mds-input-range-* CSS custom properties for all supported customization. Targeting internal class names via >>> or undocumented ::part() names couples your code to the implementation and will break on minor releases.

/* INCORRECT */
mds-input-range >>> .track-progress {
  background-color: hotpink;
}
mds-input-range::part(thumb) { /* "thumb" is not a documented part */
  border-radius: 0;
}

/* CORRECT */
mds-input-range {
  --mds-input-range-track-progress-background: rgb(var(--magma-accent-emphasis-hover));
  --mds-input-range-thumb-size: calc(var(--spacing) * 500);
}
mds-input-range::part(track) { /* "track" is a documented part */
  opacity: 0.8;
}

Do Not Use formatValue to Change the Submitted Form Value

formatValue is purely presentational - it only changes the header display string. The submitted form value is always the raw number. Do not rely on it for data transformation.

<!-- INCORRECT: expecting the form to submit the formatted string -->
<mds-input-range id="p" name="prezzo">Prezzo</mds-input-range>
<script>
  // This changes what is shown but NOT what is submitted
  document.querySelector('#p').formatValue = (v) => v + ' EUR';
  // form.submit() still sends a plain number for "prezzo"
</script>

<!-- CORRECT: format on the server or in a submit handler using event.detail -->
<mds-input-range id="p" name="prezzo">Prezzo</mds-input-range>
<script>
  document.querySelector('#p').formatValue = (v) =>
    v.toLocaleString('it-IT', { style: 'currency', currency: 'EUR' });
  // The display is formatted; handle raw numeric value on submit separately
</script>