# redux-devtools-slider-monitor

> A custom monitor for replaying Redux actions that works similarly to a video player

Latest version **2.0.0-5** (published 2020-09-07) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install redux-devtools-slider-monitor
pnpm add redux-devtools-slider-monitor
yarn add redux-devtools-slider-monitor
bun add redux-devtools-slider-monitor
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.0-5 |
| Published | 2020-09-07 |
| First published | 2015-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Cale Newman |
| Maintainers | calesce, methuselah96 |

## Links

- npm: https://www.npmjs.com/package/redux-devtools-slider-monitor
- Repository: https://github.com/reduxjs/redux-devtools
- Issues: https://github.com/reduxjs/redux-devtools/issues
- npm.io page: https://npm.io/package/redux-devtools-slider-monitor

## Dependencies (3)

- [devui](https://npm.io/package/devui.md) ^1.0.0-6
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [redux-devtools-themes](https://npm.io/package/redux-devtools-themes.md) ^1.0.0

## Recent versions

- 2.0.0-5 (latest) — 2020-09-07
- 2.0.0-4 — 2020-08-14
- 1.0.0-beta-1 — 2015-10-26

## README

## Redux Slider Monitor

[![npm version](https://img.shields.io/npm/v/redux-slider-monitor.svg?style=flat-square)](https://www.npmjs.com/package/redux-slider-monitor)

A custom monitor for use with [Redux DevTools](https://github.com/gaearon/redux-devtools).

It uses a slider based on [react-slider](https://github.com/mpowaga/react-slider) to slide between different recorded actions. It also features play/pause/step-through, which is inspired by some very cool [Elm](http://elm-lang.org/) [examples](http://elm-lang.org/blog/time-travel-made-easy).

[Try out the demo!](https://calesce.github.io/redux-slider-monitor/?debug_session=123)

<image src="https://s3.amazonaws.com/f.cl.ly/items/1I3P222C3N2R1M2y1K3b/Screen%20Recording%202015-12-22%20at%2007.20%20PM.gif?v=1b6267e7" width='800'>

### Installation

`yarn add redux-devtools-slider-monitor`

### Recommended Usage

Use with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor)

```javascript
<DockMonitor
  toggleVisibilityKey="ctrl-h"
  changePositionKey="ctrl-q"
  defaultPosition="bottom"
  defaultSize={0.15}
>
  <SliderMonitor keyboardEnabled />
</DockMonitor>
```

Dispatch some Redux actions. Use the slider to navigate between the state changes.

Click the play/pause buttons to watch the state changes over time, or step backward or forward in state time with the left/right arrow buttons. Change replay speeds with the `1x` button, and "Live" will replay actions with the same time intervals in which they originally were dispatched.

## Keyboard shortcuts

Pass the `keyboardEnabled` prop to use these shortcuts

`ctrl+j`: play/pause

`ctrl+[`: step backward

`ctrl+]`: step forward

### Running Examples

You can do this:

```
git clone https://github.com/calesce/redux-slider-monitor.git
cd redux-slider-monitor
npm install

cd examples/todomvc
npm install
npm start
open http://localhost:3000
```

### License

MIT

---
_Source: https://npm.io/package/redux-devtools-slider-monitor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._