@strv/react-sliders NPM

`@strv/react-sliders`

@strv/react-sliders

Features

Customizable & CSS agnostic
- Modules
  - useRangeSlider, useSlider (Hooks, which encapsulates the core logic and let consumers style their own sliders as they wish)
- Headless (Inspiration react-table, downshift-js)
A11y
- Full mouse & touch support
- Keyboard support
API that is easy to use & integrate
- with forms, ...
Tree-shakeable & Optimized bundle
- out of the box thanks to TSDX.
Documented API with interactive examples on CodeSandbox
Fully typed with TypeScript
Based on our already existing open source tools
- code-quality-tools
Properly tested

Install

# npm
npm install @strv/react-sliders --save

# yarn
yarn add @strv/react-sliders

Usage

Basic Examples

`useSlider`

import React from 'react'
import { useSlider } from '@strv/react-sliders'

const SliderExample = () => {
  const [value, setValue] = React.useState(0)
  const { getRailProps, getTrackProps, getHandleProps } = useSlider({
    value,
    min: 0,
    max: 100,
    onChange: setValue,
  })

  return (
    <div className="slider-container">
      <span className="slider-rail" {...getRailProps()} />
      <span className="slider-track" {...getTrackProps()} />

      <span className="slider-handle" {...getHandleProps()} />
    </div>
  )
}

`useRangeSlider`

import React from 'react'
import { useRangeSlider, TRangeTuple } from '@strv/react-sliders'

const RangeSliderExample = () => {
  const [value, setValue] = React.useState<TRangeTuple>([0, 100])
  const { getRailProps, getTrackProps, getMinHandleProps, getMaxHandleProps } = useRangeSlider({
    value,
    min: 0,
    max: 100,
    onChange: setValue,
  })

  return (
    <div className="range-slider-container">
      <span className="range-slider-rail" {...getRailProps()} />
      <span className="range-slider-track" {...getTrackProps()} />

      <span className="range-slider-handle" {...getMinHandleProps()} />
      <span className="range-slider-handle" {...getMaxHandleProps()} />
    </div>
  )
}

If you want so see more, head to the list of existing CodeSandbox examples.