Range | Components | Neighborhood Design System

Styled Version

Loading

Code

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

<nbhd-range> range </nbhd-range>

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

const App = () => (
  <>
    <NbhdRange>range</NbhdRange>
  </>
);

Property	Attribute	Type	Default	Description
`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.
`min`	`min`	`number`		Sets the range input minimum value.
`max`	`max`	`number`		Sets the range input maximum value.
`step`	`step`	`number`		Sets the range input step value.
`value`	`value`	`number`		Sets the range input initial value.
`name`	`name`	`string`		Sets the range input name.
`id`	`id`	`string`		Sets the range input id.
`cssClass`	`css-class`	`string`		Additional CSS classes to apply to the range input.
`ariaLabel`	`aria-label`	`string`		Descriptive text for additional context.
`labelData`	`labelData`	`object`		Data for making the label for the checkbox.

This component contains the following components as dependencies.