Range
ready

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

icon-storybook-default Open in 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
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.
dark dark boolean false Applies dark theme styling to the range input.
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 range input current value.
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
value-changed Deprecated Emitted when the range input value changes. { value: number }
nbhd-value-changed Emitted when the range input value changes. { value: number }

Slots

Name Description
label Custom content for the range input label. Defaults to the label property value.
help Help text content displayed below the input when not in an invalid state.
error Error message content displayed below the input when in an invalid state.

CSS Parts

Name Description
base The form control wrapper div.
label The label element for the range input.
label-slot The slot element inside the label.
label-text The text element that displays the label content.
field The wrapper div containing the input element.
input The range input element.
text The wrapper div for help and error text.
help The help slot element.
error The error slot element.

CSS Properties

Property Default Value
--nbhd-range-host-display var(--nbhd-formControl-display-host, block)
--nbhd-range-track-height var(--nbhd-space-2)
--nbhd-range-inlineSize 100%
--nbhd-range-color-inactive var(--nbhd-color-lightGray)
--nbhd-range-track-borderRadius 2px
--nbhd-range-color-active var(--nbhd-color-blue)
--nbhd-range-thumb-size var(--nbhd-space-5)

Dependencies

This component contains the following components as dependencies.