ESLint plugin
The essential plugin for use with the Atlassian Design System.no-html-range
Don't use native HTML ranges. The Atlassian Design System provides a ready-made range component that includes event tracking, ensures accessible implementations, and provides access to ADS styling features like design tokens.
Use the Atlassian Design System Range, (opens new window) component when suitable.
Examples
This rule marks code as violations when it finds native HTML range elements.
Incorrect
<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" step="1" min="0" max="10" />Correct
import Range from '@atlaskit/range';
<label for="volume">Volume</label>
<Range id="volume" step={1} min={0} max={10} />