react-state-slider

    0.5.6 • Public • Published

    npm version Live demo

    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

    slider

    Usage

    npm i react-state-slider --save
    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 (
        <Slider />
      )
    }

    API

    React State Slider is highly customizable by passing props to the component.

    Prop types

    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

    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)

    renderTop = (nFactor, trackWidth) => <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

    onChange({
      trackWidth, // width of a track element
      ...this.state, // state of the component
      ind, // the index of a current state
    });

    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:

    import Slider, { createPoint } from 'react-state-slider';
     
    const statesAmount = 9;
    const topFn = (nFactor, trackWidth) => { /* return Top Component */}
    const bottomFn = (nFactor, trackWidth) => { /* return Bottom Component */}
     
    <Slider
      points={new Array(statesAmount).fill(0).map((v, ind, arr) =>
        createPoint({
          ind,
          total: arr.length,
          top: topFn,
          bottom: bottomFn,
        })
      )}
    />
     

    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

    Install

    npm i react-state-slider

    DownloadsWeekly Downloads

    0

    Version

    0.5.6

    License

    none

    Unpacked Size

    629 kB

    Total Files

    10

    Last publish

    Collaborators

    • usulpro