Input Stepper: Use Cases
Default with no specification
When no range or step is defined, it can go infinite with default step value as 1. You can also specify prefix content using after slot.
export const defaultMode = () => html`
<label>How old is the existence?</label>
<lion-input-stepper name="year">
<div slot="after">In Billion Years</div>
</lion-input-stepper>
`;
Step and Value
Use step attribute to specify the incrementor or decrementor difference and value to set the default value.
export const steps = () => html`
<p><strong>Min:</strong> 100, <strong>Value:</strong> 200, <strong>Step:</strong> 100</p>
<lion-input-stepper min="100" step="100" name="value" value="200"></lion-input-stepper>
`;
Range
Use min and max attribute to specify range.
export const range = () => html`
<p><strong>Min:</strong> 200, <strong>Max:</strong> 500, <strong>Step:</strong> 100</p>
<lion-input-stepper min="200" max="500" name="value" step="100" value="200"></lion-input-stepper>
`;