Range
ready

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

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdRange } from '@fbin-web/neighborhood-core';
<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>

React 

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 none | primary | secondary | inverse | inverse-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 Marks the range input as readonly.
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.
label label string The label text for the range input.
errorText error-text string Error message text to display when invalid.
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 }

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

Dependencies

This component contains the following components as dependencies.