Range Window React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import RangeWindow from "./RangeWindow";

export default function Example() {
  return (
    <RangeWindow
      defaultValue={[
        25,
        75
      ]}
      min={0}
      max={100}
      step={1}
      label={"Exposure window"}
      lowerLabel={"Minimum exposure"}
      upperLabel={"Maximum exposure"}
      color={"#c6abd7"}
      disabled={false}
    />
  );
}

Using Range Window

Use value and onValueChange for a controlled interval, or defaultValue for local state. The handles cannot cross and both remain reachable with the Tab key.

Set min, max and step for your measurement. Use formatValue for units and name to submit the values as name[min] and name[max] fields.

Props

Name	Type	Required	Default	Description
value	[number, number]	No	undefined	Controlled lower and upper values.
defaultValue	[number, number]	No	[25, 75]	Initial uncontrolled interval.
onValueChange	function	No	undefined	Receives the next lower and upper values.
min	number	No	0	Minimum permitted value.
max	number	No	100	Maximum permitted value.
step	number	No	1	Native range step size.
label	string	No	"Range"	Visible and accessible group label.
lowerLabel	string	No	"Minimum"	Accessible lower-handle label.
upperLabel	string	No	"Maximum"	Accessible upper-handle label.
color	string	No	"#c6abd7"	Handle, interval and focus colour.
disabled	boolean	No	false	Disable both range inputs.
formatValue	function	No	undefined	Formats visible values and accessible value text.
name	string	No	undefined	Optional base name for hidden min and max form fields.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.