react-two-thumb-input-range

TwoThumbInputRange is a React component allowing users to input numeric values within a specific range.

Native HTML input type=range sliders do not support multiple thumbs yet so this component uses two range inputs and position them to look like a multi-thumb slider.

Under the hood TwoThumbInputRange uses HTML input type=range, but uses CSS Magic to allows users to adjust with 2 buttons

Features

• <input checked="" disabled="" type="checkbox"> Multi-Touch support
• <input checked="" disabled="" type="checkbox"> Accessible with ARIA and keyboard support
• <input checked="" disabled="" type="checkbox"> Highly Customizable
• <input checked="" disabled="" type="checkbox"> Written in TypeScript

Examples

All examples available in Storybook

Live Web App

Installation

yarn add react-two-thumb-input-range

# or

npm i react-two-thumb-input-range

Import components

import { TwoThumbInputRange } from "react-two-thumb-input-range"

Usage

function App() {
  const [value, setValue] = useState([1000, 4333])

  const onValueSChange = (values) => {
    setValue(values)
  }

  return <TwoThumbInputRange onChange={onValueChange} values={value} min={1000} max={10000} />
}

Props