lion/packages/input-stepper

Input Stepper

lion-input-stepper enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot after to suffix the extra information.

import { html } from 'lit-html';
import '@lion/form/lion-form.js';
import './lion-input-stepper.js';

export default {
  title: 'Forms/Input Stepper',
};

export const main = () => html`
  <lion-input-stepper max="5" min="0" name="count">
    <label slot="label">RSVP</label>
    <div slot="help-text">Max. 5 guests</div>
  </lion-input-stepper>
`;

Features

• Based on lion-input.
• Set min and max value to define the range.
• Set step value in integer or decimal to increase and decrease the value.
• Use ArrowUp or ArrowDown to update the value.

How to use

Installation

npm i --save @lion/input-stepper

import { LionInputStepper } from '@lion/input-stepper';
// or
import '@lion/input-stepper/lion-input-stepper.js';

Usage

<lion-input-stepper max="5" min="0" name="count">
  <label slot="label">RSVP</label>
  <div slot="help-text">Max. 5 guests</div>
</lion-input-stepper>

Examples

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>
`;

Validation

Only numbers are allowed in the field.

export const validation = () => html`
  <p>
    <strong>Min:</strong> 100, <strong>Max:</strong> 500, <strong>Step:</strong> 100,
    <strong>Value:</strong> Test
  </p>
  <lion-input-stepper min="100" max="500" name="value" step="100" value="Test"></lion-input-stepper>
`;

Form

export const usingForm = () => html`
  <lion-form
    @submit=${e => {
      console.log(e.target.serializedValue);
      const code = document.getElementById('code');
      code.style = 'background-color:#DEDEDE;padding:12px;';
      code.innerHTML = `<code>${JSON.stringify(e.target.serializedValue, null, 4)}</code>`;
    }}
  >
    <form>
      <lion-input name="fullname" label="Full name"></lion-input>
      <br />
      <lion-input-stepper min="0" max="5" name="count">
        <label slot="label">RSVP</label>
        <div slot="help-text">Max. 5 guests</div>
      </lion-input-stepper>
      <br />
      <lion-button raised>Submit</lion-button>
      <lion-button
        type="button"
        raised
        @click=${ev => ev.currentTarget.parentElement.parentElement.resetGroup()}
        >Reset</lion-button
      >
    </form>
  </lion-form>
  <pre id="code"></pre>
`;