react-two-thumb-input-range

Accessible two thumb input range component for React that implements <input type=range>

Usage no npm install needed!

<script type="module">
  import reactTwoThumbInputRange from 'https://cdn.skypack.dev/react-two-thumb-input-range';
</script>

README

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

  • Multi-Touch support
  • Accessible with ARIA and keyboard support
  • Highly Customizable
  • 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

Attribute Type Default Description
min number 0 The minimum permitted value.
max number 100 The maximum permitted value.
values [number,number] The current value of the Input Range.
onChange func Callback function that is fired when the Input's value changed. onChange: ([number, number]) => void
railColor string #EDF2F7 Color of rail element.
trackColor string #1976d2 Color of track element.
thumbColor string #EDF2F7 Color of thumb element.
thumbStyle React.CSSProperties 1976d2 Styles applied to the thumb element
thumbFocusStyle React.CSSProperties `` Styles applied to the when thumb element focus
inputStyle React.CSSProperties `` Styles applied to the input element
labelStyle React.CSSProperties `` Styles applied to the label element
labelTextStyle React.CSSProperties `` Styles applied to the label textelement
showLabels boolean true If false, the default labels will not render.
ariaValueText string MDN Web Docs