# nord-range
> Range input lets user specify a numeric value using a slider which
> must be no less than a given value, and no more than another given value.
## Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
> **Do:** - Use to let user specify a numeric value using a slider.
- Use when the accuracy of the numeric value entered isn’t important.
- Always use with a label, even if that label is hidden.
> **Don't:** - Don’t use when the accuracy of the numeric value entered is important.
- For entering arbitrary numeric values. Use [input component](/components/input/) instead.
---
## Hint placement
Hint text is rendered above the control by default to preserve existing behavior for current consumers. Use the `hint-below` property to opt in to rendering the hint below the control and any error.
This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless `hint-below` is explicitly set.
---
## Content guidelines
Range labels act as a title for the range input. Labels should typically be short and in noun form:
> **Do:** Lightness percentage
> **Don't:** What is the lightness percentage?
When writing range labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
> **Do:** Item price
> **Don't:** Item Price
Do not use colons in range label:
> **Do:** Color depth
> **Don't:** Color depth:
## Examples
### Basic
```html
```
### Custom Thumb Size
```html
```
### Custom Track Size
```html
```
### Disabled
```html
Disabled
```
### Readonly
```html
```
### Expanded
```html
```
### Hide Label
```html
Label
```
### Required
```html
```
### Responsive
```html
```
### Steps
```html
```
### Unit
```html
```
### With A Complex Hint
```html
Label
Hint is an accessible way to provide additional information that might help the user
```
### With A Complex Label
```html
Label with color
```
### With A Hint
```html
```
### With A Hint Below
```html
Label
Hint is an accessible way to provide additional information that might help the user
This field is required
```
### With Error
```html
Label
This field is required
```
### Bounds
```html
```
### Standalone
```html
```
### Field
```html
Volume
From 0 to 100.
```
## API Reference
### Properties
- **min** (`number`, default: `0`) — Minimum value for the range slider.
- **max** (`number`, default: `10`) — Maximum value for the range slider.
- **step** (`number`, default: `1`) — Step amount for the range slider.
- **expand** (`boolean`, default: `false`) — Controls whether the input expands to fill the width of its container.
- **placeholder** (`string | undefined`) — Placeholder text to display within the control.
- **label** (`string`, default: `''`) — Label for the control. Ignored when the control is wrapped in a
<nord-field>, which provides the label via <nord-field-label>.
- **hint** (`string | undefined`) — Optional hint text shown with the control. Ignored inside a <nord-field>,
which provides it via <nord-field-description>.
- **hint-below** (`boolean`, default: `false`) — Renders the hint below the control and any error instead of below the label.
- **hide-label** (`boolean`, default: `false`) — Visually hide the label, but still expose it to assistive technologies.
- **error** (`string | undefined`) — Optional error shown with the control. Ignored inside a <nord-field>,
which provides it via <nord-field-error>.
- **required** (`boolean`, default: `false`) — Determines whether the control is required or not.
A required control is announced as such to assistive technology and, inside
a <nord-field>, drives the required indicator on the <nord-field-label>.
When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.
- **hide-required** (`boolean`, default: `false`) — Visually hide the required indicator, but still expose the required state
to assistive technologies.
- **autocomplete** (`AutocompleteAttribute`, default: `'off'`) — Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.
- **readonly** (`boolean`, default: `false`) — Makes the component readonly, so that it is not editable.
Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.
- **disabled** (`boolean`, default: `false`) — Makes the component disabled. This prevents users from
being able to interact with the component, and conveys
its inactive state to assistive technologies.
- **name** (`string | undefined`) — The name of the form component.
- **value** (`string`, default: `''`) — The value of the form component.
- **form** (`HTMLFormElement | null`) — Gets the form, if any, associated with the form element.
The setter accepts a string, which is the id of the form.
### Events
- **input** (`NordEvent`) — Fired as the user types into the input.
- **change** (`NordEvent`) — Fired whenever the input's value is changed via user interaction.
### Slots
- **label** — Use when a label requires more than plain text.
- **hint** — Optional slot that holds hint text for the input.
- **error** — Optional slot that holds error text for the input.
### Methods
- **focus** — `focus(options?: FocusOptions) => void` — Programmatically move focus to the component.
- **blur** — `blur() => void` — Programmatically remove focus from the component.
- **click** — `click() => void` — Programmatically simulates a click on the component.
### CSS Custom Properties
- `--n-range-thumb-size` (default: `20px`) — Controls the size of the thumb.
- `--n-range-track-color-active` (default: `var(--n-color-accent)`) — Controls the color of the portion of the track that represents the current value.
- `--n-range-track-color-inactive` (default: `var(--n-color-border-strong)`) — Controls the color of the portion of the track that represents the remaining value.
- `--n-range-track-size` (default: `3px`) — Controls the height of the track.