@strv/react-sliders
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)
-
Modules
- [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.
- out of the box thanks to
- [x] Documented API with interactive examples on CodeSandbox
- [x] Fully typed with TypeScript
- [x] Based on our already existing open source tools
- [x] Properly tested
Install
# npm
npm install @strv/react-sliders --save
# yarn
yarn add @strv/react-slidersUsage
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
Related
This project was bootstrapped with TSDX.
Contribution
Authors
- Lukas Hudec (@xhudec)