react-infinite-range

React Component for creating infinite range inputs.

API Docs

<InfiniteRange>

Usage

Uncontrolled

import { InfiniteRange } from 'react-infinite-range'
// In your render:
<InfiniteRange
  floor={100}
  ceiling={1000000000}
  step={100}
  chunkSize={500000}
  defaultValue={100}
>
  {props => <input type="range" { ...props } />}
</InfiniteRange>

Controlled

InfiniteRange owns the state of the input component and derives it from props. This is a design decision to hide implementation details from the consumer. Read more in You Probably Don't Need Derived State.

Props

children: (state: InfiniteRangeInputState & InfiniteRangeChildProps) => Element<*>

Required function.

floor: number

Lower boundary for the input, you might think of it as min for traditional HTML range input.

ceiling: number

Upper boundary for the input, you might think of it as max for traditional HTML range input.

step: number

An equivalent of step for traditional HTML range input.

chunkSize: number

onChange: (value: number) => void

onInput: (value: number) => void

defaultValue: number

value: number