RangeNew
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.
<nord-range label="Label" value="7" min="0" max="10"></nord-range>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
min | min | Minimum value for the range slider. | number | 0 |
max | max | Maximum value for the range slider. | number | 10 |
step | step | Step amount for the range slider. | number | 1 |
expand | expand | Controls whether the input expands to fill the width of its container. | boolean | false |
label | label | Label for the input. | string | "" |
hint | hint | Optional hint text to be displayed with the input. Alternatively use the hint slot. | string | undefined | undefined |
hideLabel | hide-label | Visually hide the label, but still show it to assistive technologies like screen readers. | boolean | false |
placeholder | placeholder | Placeholder text to display within the input. | string | undefined | undefined |
error | error | Optional error to be shown with the input. Alternatively use the error slot. | string | undefined | undefined |
required | required | Determines whether the input is required or not. An input marked as required will be announced as such to users of assistive technology. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors. | boolean | false |
hideRequired | hide-required | Visually hide the required indicator, but still show required attribute to assistive technologies like screen readers. | boolean | false |
autocomplete | autocomplete | Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user. | AutocompleteAttribute | "off" |
readonly | readonly | 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. | boolean | false |
disabled | disabled | Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. | boolean | false |
name | name | The name of the form component. | string | undefined | undefined |
value | value | The value of the form component. | string | "" |
form | form | Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form. | HTMLFormElement | null | undefined |
Events
| Event | Description | Type |
|---|---|---|
input | Fired as the user types into the input. | NordEvent |
change | Fired whenever the input's value is changed via user interaction. | NordEvent |
Slots
| Slot name | Description |
|---|---|
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
| Method name | Parameters | Description |
|---|---|---|
focus(options?: FocusOptions) => void | options: An object which controls aspects of the focusing process. | Programmatically move focus to the component. |
blur() => void | N/A | Programmatically remove focus from the component. |
click() => void | N/A | Programmatically simulates a click on the component. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-range-thumb-size | Controls the size of the thumb. | 20px |
--n-range-track-color-active | Controls the color of the portion of the track that represents the current value. | var(--n-color-accent) |
--n-range-track-color-inactive | Controls the color of the portion of the track that represents the remaining value. | var(--n-color-border-strong) |
--n-range-track-size | Controls the height of the track. | 3px |
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 instead.
Content guidelines #
Range labels act as a title for the range input. Labels should typically be short and in noun form:
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 not use colons in range label:
Integration
For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.
Troubleshooting
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.