Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/usulpro/react-state-slider
Responsive slider smoothly switchable between states. It's controllable by mouse and touch screen
https://github.com/usulpro/react-state-slider
component draggable mobile react responsive slider smooth-scrolling snap stage stages state states touch touchscreen ui
Last synced: about 2 months ago
JSON representation
Responsive slider smoothly switchable between states. It's controllable by mouse and touch screen
- Host: GitHub
- URL: https://github.com/usulpro/react-state-slider
- Owner: usulpro
- License: mit
- Created: 2018-02-26T09:23:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-10T11:18:52.000Z (almost 7 years ago)
- Last Synced: 2024-11-24T17:43:21.116Z (2 months ago)
- Topics: component, draggable, mobile, react, responsive, slider, smooth-scrolling, snap, stage, stages, state, states, touch, touchscreen, ui
- Language: JavaScript
- Homepage: https://usulpro.github.io/react-state-slider/
- Size: 1000 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://badge.fury.io/js/react-state-slider)
[](https://usulpro.github.io/react-state-slider)
# 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
[](https://github.com/UsulPro/react-state-slider/raw/master/doc/slider.jpg)
## Usage
```sh
npm i react-state-slider --save
```
```js
import Slider, { createPoint } from 'react-state-slider';
// createPoint is an auxiliary tool for creating states array. It's up to you whether to use it
// somewhere in your app:
render() {
return (
)
}
```
## API
React State Slider is highly customizable by passing `props` to the component.
### Prop types
```js
const propTypes = {
snapMagnet: PropTypes.number, // snaping distance around state point
speed: PropTypes.number, // speed of the thumb when you clicking on the track
frontZone: PropTypes.number, // The distance within which the thumb affects the state points (in %%)
rearZone: PropTypes.number, // frontZone - when moving toward to points, rearZone - backward of points
points: PropTypes.arrayOf(
// array of states
PropTypes.shape({
snap: PropTypes.number, // distance to the point in %%
renderTop: PropTypes.func, // function that render a top state component (see details below)
renderBottom: PropTypes.func, // function that render a bottom state component (see details below)
})
),
initPos: PropTypes.number, // the index of initial state (from 0)
onChange: PropTypes.func, // invokes when the thumb appears in new state (see details below)
onDrag: PropTypes.func, // invokes when thumb is dragging
classNames: PropTypes.shape(), // classNames of slider root, track, active track and thumb
styles: PropTypes.shape(), // classNames for slider root, track, active track and thumb
debug: PropTypes.bool, // will show additional information for each state point
};
```
### Default props
```js
const defaultProps = {
snapMagnet: 30,
speed: 1.5,
frontZone: 10,
rearZone: 10,
points: new Array(9)
.fill(0)
.map((v, ind, arr) => createPoint({ ind, total: arr.length })),
initPos: 4,
onChange: () => {},
onDrag: () => {},
classNames: {
slider: 'react-state-slider',
track: 'track',
activeTrack: 'active-track',
thumb: 'thumb',
},
styles: {
slider: {},
track: {},
activeTrack: {},
thumb: {},
},
debug: false,
};
```
### renderTop (renderBottom)
```js
renderTop = (nFactor, trackWidth) => ;
```
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
```js
onChange({
trackWidth, // width of a track element
...this.state, // state of the component
ind, // the index of a current state
});
```
where state is:
```js
{
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:
```js
import Slider, { createPoint } from 'react-state-slider';
const statesAmount = 9;
const topFn = (nFactor, trackWidth) => { /* return Top Component */}
const bottomFn = (nFactor, trackWidth) => { /* return Bottom Component */}
createPoint({
ind,
total: arr.length,
top: topFn,
bottom: bottomFn,
})
)}
/>
```
## Credits
If you use this component could you kindly consider to [star](https://github.com/UsulPro/react-state-slider/stargazers) this project
Created with ❤︎ to OSS by [@UsulPro](https://twitter.com/UsulPro)
any contributions are highly welcome!
MIT