Range

Ready

A slider control that allows users to select a value within a specified range.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdRange } from '@fbin-web/neighborhood-core';

Usage

<nbhd-range
  aria-label="Descriptive text about this input"
  min="0"
  value=""
  name="range"
  help-text="This is some help text for the range input."
  error-text="This is some error text for the range input."
  step="5"
  label="Range form input">
</nbhd-range>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdRange } from '@fbin-web/neighborhood-react';

Usage

import { NbhdRange } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdRange
      ariaLabel="Descriptive text about this input"
      min={0}
      value={0}
      name="range"
      helpText="This is some help text for the range input."
      errorText="This is some error text for the range input."
      step={5}
      label="Range form input"></NbhdRange>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Sets the surface color treatment for the range input.
`invalid`	`invalid`	`boolean`	`false`	Marks the range input as invalid for validation.
`disabled`	`disabled`	`boolean`	`false`	Disables the range input.
`required`	`required`	`boolean`	`false`	Marks the range input as required.
`readonly`	`readonly`	`boolean`	`false`	Shows the value but blocks changes, and is announced as read-only.
`showValue`	`show-value`	`boolean`	`false`	Displays the current value next to the range slider.
`min`	`min`	`number`	`0`	Sets the range input minimum value.
`max`	`max`	`number`	`100`	Sets the range input maximum value.
`step`	`step`	`number`	`1`	Sets the range input step value.
`value`	`value`	`number`	—	Sets the current value of the range input.
`name`	`name`	`string`	—	Sets the range input name. The form field name it submits under.
`label`	`label`	`string`	—	The label text for the range input.
`errorText`	`error-text`	`string`	—	Error message text to display when invalid. Defaults to "This field has an error." when empty.
`helpText`	`help-text`	`string`	—	Help text to provide additional context.
`cssClass`	`css-class`	`string`	—	Additional CSS classes to apply to the range input.
`ariaLabel`	`aria-label`	`string`	—	Descriptive text for additional context.

Events

Name	Description	Event Detail
`nbhd-value-changed`	Emitted when the range value changes after the native input event is handled.	`{ value: number \| undefined }`

Form methods

Form-associated: inside a

it submits under its `name`, resets with the form, is disabled by a disabled

, and reports the inner range input’s native validity (`invalid` only shows the error state). A page-level focuses it.

Name	Description
`checkValidity()`	Returns false (and fires `invalid`) if the control fails validation.
`reportValidity()`	Like checkValidity(), and shows the browser’s validation message on the control.
`setCustomValidity(message)`	Marks the control invalid with your own message; an empty string clears it.
`validity`	The ValidityState (valueMissing, typeMismatch, customError, …).
`validationMessage`	The message the browser would show.
`willValidate`	Whether the control takes part in form validation (false when disabled).
`associatedForm`	The the control belongs to, or null.

Slots

Name	Description
`label`	Custom label content rendered inside the form-control label. Falls back to the `label` property when no slot content is provided.
`help`	Optional helper text displayed below the range when the control is not invalid and help text is present.
`error`	Optional error text displayed below the range only when the control is invalid and error text is present.

CSS Parts

Name	Description
`base`	The outer form-control container that wraps the range label, field, and helper/error text.
`label`	The label element associated with the range input.
`label-slot`	The slot wrapper inside the label used for custom label content.
`label-text`	The text element that renders the fallback label content.
`required`	The required marker (*) shown in the label when required. Hidden from assistive technology, which announces the native required state.
`field`	The wrapper div surrounding the range input and optional value output.
`input`	The native range input element.
`text`	The container that wraps help and error messaging.
`help`	The help slot element shown when the range is not invalid.
`error`	The error slot element shown when the range is invalid.

nbhd-range::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-range or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Range

Property	Token	Value
`--nbhd-range-appearance`	—	`none`
`--nbhd-range-blockSize`	`--nbhd-size-track`	`8px`
`--nbhd-range-disabled-host-opacity`	—	`0.5`
`--nbhd-range-focus-outlineColor`	`--nbhd-context-color-focus-outline`	Adapts to surface
`--nbhd-range-focus-outlineOffset`	—	`1px`
`--nbhd-range-focus-outlineStyle`	`--nbhd-focus-control-outlineStyle`	`solid`
`--nbhd-range-focus-outlineWidth`	`--nbhd-focus-outlineWidth`	`2px`
`--nbhd-range-host-display`	—	`block`
`--nbhd-range-inlineSize`	—	`100%`
`--nbhd-range-marginBlock`	`--nbhd-space-2`	`8px`
`--nbhd-range-thumb-backgroundColor`	`--nbhd-context-color-control-selected-indicator`	Adapts to surface
`--nbhd-range-thumb-borderRadius`	`--nbhd-border-radius-full`	`9999px`
`--nbhd-range-thumb-cursor`	—	`pointer`
`--nbhd-range-thumb-size`	—	`20px`
`--nbhd-range-track-backgroundColor`	`--nbhd-context-color-control-border`	Adapts to surface
`--nbhd-range-track-blockSize`	`--nbhd-size-track`	`8px`
`--nbhd-range-track-borderRadius`	`--nbhd-border-radius-sm`	`2px`
`--nbhd-range-track-inlineSize`	—	`100%`

Form control

Property	Token	Value
`--nbhd-formControl-display`	—	`inline`
`--nbhd-formControl-field-appearance`	—	`none`
`--nbhd-formControl-field-borderRadius`	`--nbhd-border-radius-none`	`0`
`--nbhd-formControl-field-color`	`--nbhd-context-color-control-foreground`	Adapts to surface
`--nbhd-formControl-field-display`	—	`inline-block`
`--nbhd-formControl-field-fontFamily`	`--nbhd-typography-body-fontFamily`	`sans-serif`
`--nbhd-formControl-field-fontSize`	`--nbhd-typography-body-fontSize`	`1rem`
`--nbhd-formControl-field-inlineSize`	—	`100%`
`--nbhd-formControl-field-position`	—	`relative`
`--nbhd-formControl-fontFamily`	`--nbhd-typography-body-fontFamily`	`sans-serif`
`--nbhd-formControl-host-display`	—	`block`
`--nbhd-formControl-label-color`	`--nbhd-context-color-text-primary`	Adapts to surface
`--nbhd-formControl-label-display`	—	`block`
`--nbhd-formControl-label-fontFamily`	`--nbhd-typography-label-fontFamily`	`sans-serif`
`--nbhd-formControl-label-fontSize`	`--nbhd-typography-label-fontSize`	`1rem`
`--nbhd-formControl-label-fontWeight`	`--nbhd-typography-label-fontWeight`	`600`
`--nbhd-formControl-label-letterSpacing`	—	`inherit`
`--nbhd-formControl-label-marginBlock`	`--nbhd-space-0 --nbhd-space-05`	`0px 2px`
`--nbhd-formControl-label-position`	—	`relative`
`--nbhd-formControl-label-textTransform`	—	`inherit`
`--nbhd-formControl-marginBlock`	`--nbhd-space-0`	`0px`
`--nbhd-formControl-maxInlineSize`	—	`100%`
`--nbhd-formControl-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-formControl-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-formControl-position`	—	`relative`
`--nbhd-formControl-required-gap`	`--nbhd-space-05`	`2px`
`--nbhd-formControl-text-marginBlock`	`--nbhd-space-1 --nbhd-space-0`	`4px 0px`

Dependencies

Child components <nbhd-range> renders internally. Import them too when you tree-shake.

TextReady <nbhd-text>