React State Slider
Responsive slider smoothly switchable between states. It's controllable by mouse and touch screen.
You can drag the thumb by mouse or by touch. States will interact while you dragging. As soon as you release the thumb it will jump to the nearest state.
You can click or tap on the slider. And it smoothly scroll to the neareat state. During scrolling states passing by thumb will interact as well.
Demo https://usulpro.github.io/react-state-slider
Usage
npm i react-state-slider --save
;// createPoint is an auxiliary tool for creating states array. It's up to you whether to use it // somewhere in your app: { return <Slider /> }
API
React State Slider is highly customizable by passing props
to the component.
Prop types
const propTypes = snapMagnet: PropTypesnumber // snaping distance around state point speed: PropTypesnumber // speed of the thumb when you clicking on the track frontZone: PropTypesnumber // The distance within which the thumb affects the state points (in %%) rearZone: PropTypesnumber // frontZone - when moving toward to points, rearZone - backward of points points: PropTypes initPos: PropTypesnumber // the index of initial state (from 0) onChange: PropTypesfunc // invokes when the thumb appears in new state (see details below) onDrag: PropTypesfunc // invokes when thumb is dragging classNames: PropTypesshape // classNames of slider root, track, active track and thumb styles: PropTypesshape // classNames for slider root, track, active track and thumb debug: PropTypesbool // will show additional information for each state point;
Default props
const defaultProps = snapMagnet: 30 speed: 15 frontZone: 10 rearZone: 10 points: 9 initPos: 4 {} {} classNames: slider: 'react-state-slider' track: 'track' activeTrack: 'active-track' thumb: 'thumb' styles: slider: {} track: {} activeTrack: {} thumb: {} debug: false;
renderTop (renderBottom)
<TopComponent />;
where nFactor
(0 < nFactor < 1
)
is a coefficient that shows the distance between the thumb and this point. It's 0
when distance > frontZone
(rearZone
) and 1
when the thumb is exactly on the point.
trackWidth
- is a current widh of the track. Note renderTop (renderBottom) will invoke when you resizing a browser window, so you can responsively control how your component appearance depending on screen resolution.
onChange
;
where state is:
valuePC // distance of the thumb in %% valuePX // distance of the thumb in pixels valueTr // distance of the nearest state point in pixels
createPoint
To create your custom states you need to pass them to the points
prop of this Slider. You can do it manually, but in some cases it's more productive to use createPoint
for that. It will calculate the %% for each point depending on the amount of them. You can do it the follow way:
; const statesAmount = 9;const topFn = { /* return Top Component */}const bottomFn = { /* return Bottom Component */} <Slider points=statesAmount/>
Credits
If you use this component could you kindly consider to star this project
Created with ❤︎ to OSS by @UsulPro
any contributions are highly welcome!
MIT