---
schema_version: "1"
id: baaf2b08feba7cdfd13e524333f17b1ba78e5bca05f9d8f8b7c2e1ed9927875a
title: Range
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/range/lightning-range.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-range.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: a235b2222747b87fc9ee056a74e5a133720e16d49620df73e52ec26ffc123cf2
products:
  - Lightning Component Reference
---

# Range

**`lightning-input`**
_type="range"_

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="range" model="lwc" namespace="lightning"}


:::::

:::::tab

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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-input type="range" label="Number" min="0" max="10">
    </lightning-input>
</template>
```
<!-- prettier-ignore-end -->

## Design

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](/docs/platform/lightning-component-reference/guide/lightning-slider.html) instead.

## Usage

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.

## Input Validation

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.

<!-- prettier-ignore -->
```html
<template>
  <lightning-input
    type="range"
    label="Volume Level"
    min="0"
    max="100"
    step="5"
    required
    lwc:ref="volumeRange"
    message-when-value-missing="Please set a volume level"
    message-when-range-underflow="Volume must be at least 0"
    message-when-range-overflow="Volume cannot exceed 100"
    message-when-step-mismatch="Volume must be in increments of 5"
  >
  </lightning-input>
  <lightning-button label="Submit" onclick={handleSubmit}></lightning-button>
</template>
```

**note:** For the default error messages, see the [`lightning-input` documentation](/docs/platform/lightning-component-reference/guide/lightning-input.html).

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.

```javascript
import { LightningElement } from "lwc";

export default class RangeValidation extends LightningElement {
  handleSubmit() {
    const rangeInput = this.refs.volumeRange;
    console.log(rangeInput.validity.valid); // Returns true or false
    if (!rangeInput.checkValidity()) {
      rangeInput.reportValidity();
      return;
    }
    // Proceed with form submission
    const volumeLevel = rangeInput.value;
  }
}
```

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

## Accessibility

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](/docs/platform/lightning-component-reference/guide/lightning-input.html?type=Specifications).

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.

## Custom Events

**`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.

| Parameter | Type   | Description              |
| --------- | ------ | ------------------------ |
| value     | string | Returns the input value. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | true  | This event bubbles up through the DOM.                                                                    |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | true  | This event propagates outside of the component in which it was dispatched.                                |

## See Also

[`lightning-input`](/docs/platform/lightning-component-reference/guide/lightning-input.html)


:::::

:::::tab
For this component's attributes and methods, see the [`lightning-input` Specifications tab](/docs/platform/lightning-component-reference/guide/lightning-input.html?type=Specifications).


:::::

::::::