react-infinite-range

React Component for creating infinite range inputs.

Usage no npm install needed!

<script type="module">
  import reactInfiniteRange from 'https://cdn.skypack.dev/react-infinite-range';
</script>

README

react-infinite-range Build Status npm version

React Component for creating infinite range inputs.

react-infinite-range example

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