@strv/react-sliders

• @strv/react-sliders
  • Features
  • Install
  • Usage
    • Basic Examples
      • useSlider
      • useRangeSlider
    • Hooks API
  • Related
    • Contribution
    • Authors
    • License

Features

• [x] 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)
• [x] A11y
  • Full mouse & touch support
  • Keyboard support
• [x] API that is easy to use & integrate
  • with forms, ...
• [x] Tree-shakeable & Optimized bundle
  • out of the box thanks to TSDX.
• [x] Documented API with interactive examples on CodeSandbox
• [x] Fully typed with TypeScript
• [x] Based on our already existing open source tools
  • code-quality-tools
• [x] 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.

Hooks API

• useSlider
• useRangeSlider

Related

This project was bootstrapped with TSDX.

Contribution

See Contributing guide

Authors

• Lukas Hudec (@xhudec)

License

MIT License