Range

Custom range input with cross-browser track and thumb styling, plus min, max, and step support.

Overview

<RangeInput> renders a custom <input type="range"> whose track (the background) and thumb (the value) are styled to appear the same across browsers. Filling the track from the thumb to indicate progress is only supported natively by Edge Legacy and Firefox, so RangeInput doesn't attempt it.

Example range

import { FormLabel, RangeInput } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="customRange1">Example range</FormLabel>
      <RangeInput id="customRange1" />
    </>
  )
}

Disabled

Add the disabled boolean attribute to give the input a grayed-out appearance and remove pointer events.

Disabled range

import { FormLabel, RangeInput } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="disabledRange">Disabled range</FormLabel>
      <RangeInput id="disabledRange" disabled />
    </>
  )
}

Min and max

Range inputs have implicit values for min and max — 0 and 100, respectively. Pass min and max to set new bounds.

Example range

import { FormLabel, RangeInput } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="customRange2">Example range</FormLabel>
      <RangeInput min={0} max={5} defaultValue="3" id="customRange2" />
    </>
  )
}

Steps

By default, range inputs snap to integer values. Pass a step value to change the increment — the example below uses step="0.5" to double the number of steps.

Example range

import { FormLabel, RangeInput } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="customRange3">Example range</FormLabel>
      <RangeInput min={0} max={5} step={0.5} defaultValue="3" id="customRange3" />
    </>
  )
}

API

RangeInput

Prop	Type	Default
`className?`	`string`	—
A string of all className you want applied to the component.
`disabled?`	`boolean`	—
Toggle the disabled state for the component.
`help?`	`ReactNode`	—
A description for the field, rendered below the range input.
`invalid?`	`boolean`	—
Set component validation state to invalid.
`invalidFeedback?`	`ReactNode`	—
An error message for the field, rendered below the range input when `invalid` is set.
`label?`	`ReactNode`	—
The field's caption, rendered as a `FormLabel` associated with this range input.
`max?`	`number`	—
Specifies the maximum value for the component.
`min?`	`number`	—
Specifies the minimum value for the component.
`onChange?`	`ChangeEventHandler<HTMLInputElement>`	—
Method called immediately after the `value` prop changes.
`readOnly?`	`boolean`	—
Toggle the readonly state for the component.
`step?`	`number`	—
Specifies the interval between legal numbers in the component.
`valid?`	`boolean`	—
Set component validation state to valid.
`validFeedback?`	`ReactNode`	—
A success message for the field, rendered below the range input when `valid` is set.
`value?`	`string \| number`	—
The `value` attribute of component. @controllable onChange