Range

A slider control for entering a number within a given range. When working with numerical input, you can use attributes like max, min, and step.

The attributes maxlength, minlength, and pattern can’t be used with range type because they’re for string data.

1<template>
2    <lightning-input type="range" label="Number" min="0" max="10">
3    </lightning-input>
4</template>

The lightning-input component of type="range" doesn’t implement the Salesforce Lightning Design System (SLDS). To render an <input> element of type="range" that implements SLDS, use the lightning-slider component instead.

Use the range type input field if the control’s exact value isn’t important. The default value is halfway between the minimum and maximum values. No pattern validation is available for this type. Consider these default values.

• The default min value is 0.
• The default max value is 100.
• The default step value is 1.

To ensure a value is provided, use the required attribute. Use min, max, and step attributes to constrain the allowed values. You can also programmatically validate the input using the validity API.

1<template>
2  <lightning-input
3    type="range"
4    label="Volume Level"
5    min="0"
6    max="100"
7    step="5"
8    required
9    lwc:ref="volumeRange"
10    message-when-value-missing="Please set a volume level"
11    message-when-range-underflow="Volume must be at least 0"
12    message-when-range-overflow="Volume cannot exceed 100"
13    message-when-step-mismatch="Volume must be in increments of 5"
14  >
15  </lightning-input>
16  <lightning-button label="Submit" onclick={handleSubmit}></lightning-button>
17</template>

To validate the range input, check its validity using the checkValidity() method or access the value property. If the value isn’t valid, the reportValidity() method shows the error message below range input.

1import { LightningElement } from "lwc";
2
3export default class RangeValidation extends LightningElement {
4  handleSubmit() {
5    const rangeInput = this.refs.volumeRange;
6    console.log(rangeInput.validity.valid); // Returns true or false
7    if (!rangeInput.checkValidity()) {
8      rangeInput.reportValidity();
9      return;
10    }
11    // Proceed with form submission
12    const volumeLevel = rangeInput.value;
13  }
14}

The validity attribute returns an object with read-only boolean properties. For the range type, these attributes apply:

• badInput - Indicates that the value is invalid for any input type
• customError - Indicates that a custom error has been set using setCustomValidity()
• rangeOverflow - Indicates that the value is greater than the specified max attribute
• rangeUnderflow - Indicates that the value is less than the specified min attribute
• stepMismatch - Indicates that the value doesn’t match the specified step attribute
• valueMissing - Indicates that no value is provided when the required attribute is set
• valid - True if none of the preceding properties are true

When you use the label attribute, the component generates a unique ID for the internal <label> and uses a standard for attribute to link it to the range slider.

If you use the label-hidden variant, the component maintains the for attribute to link between the range slider and the label.

If you use the field-level-help attribute, the component creates an aria-describedby link between the range slider and the help tooltip.

If the range slider fails validation, the component adds aria-invalid="true" and links the error message to the input by using aria-describedby.

For additional ARIA attributes that you can use, see the lightning-input Specifications tab.

Use these keys for keyboard navigation on the range slider.

• Left and Right arrow keys: Increments the value by the step amount. Defaults to 1.
• Up and Down arrow keys: Decrements the value by the step amount. Defaults to 1.
• Home and End keys: Moves the slider to the min or max value.
• Page Up and Page Down keys: Moves the slider by a larger increment, if supported by the browser or OS.

change

The event fired when a value is changed in the input field.

The change event returns one of the following event.target parameters, depending on input type.

The event properties are as follows.

lightning-input

For this component’s attributes and methods, see the lightning-input Specifications tab.