# scrubbable

> Add Scrubbing functionality to your inputs

Latest version **2.0.2** (published 2021-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install scrubbable
pnpm add scrubbable
yarn add scrubbable
bun add scrubbable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2021-05-02 |
| First published | 2021-05-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Mohammed Al-Qurafi |
| Maintainers | alqurafi |
| Keywords | scrubbing, slider, range, ux, interaction, pointer-lock, pointer, mouse, drag, control, input, number |

## Links

- npm: https://www.npmjs.com/package/scrubbable
- Repository: https://github.com/mhmd-22/scrubbable
- Homepage: https://github.com/mhmd-22/scrubbable#readme
- Issues: https://github.com/mhmd-22/scrubbable/issues
- npm.io page: https://npm.io/package/scrubbable

## Alternatives

- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2021-05-02
- 2.0.1 — 2021-05-02
- 2.0.0 — 2021-05-02

## README

# Scrubbable
[Live Demo](https://mhmd-22.github.io/scrubbable/)

Lightweight library for creating scrubbable inputs to easily and precisely adjust values by taking advantage of Pointer Lock API.

## Preview
![image](https://github.com/mhmd-22/scrubbable/raw/main/preview/preview.gif)

## Example

```javascript
const canvas = document.getElementById('canvas_1');
const ctx = canvas.getContext('2d');

const inputRed = document.getElementById('input_red');

Scrubbable(inputRed, {
  min: 0,
  max: 255,
  step: 1,
  threshold: 16,
  onScrub: function (e) {
    const { width, height } = canvas;
    ctx.clearRect(0, 0, width, height);

    ctx.fillStyle = `rgb(${e.value}, 0, 0)`;
    ctx.fillRect(0, 0, width, height);
  },
});
```

Result:

![image](https://github.com/mhmd-22/scrubbable/raw/main/preview/example.gif)

[Live](https://mhmd-22.github.io/scrubbable/canvas.html)


More examples in [demo](/demo) folder

## Usage

`Scrubbable(element, options)`

**Element**: Any html element

**Options :**


-   **min**, **max**, **step**, and **value**. these values are inferred if input element is supplied. otherwise you must set this
- **decimals**(default: `auto`): this value is supplied to `Number.toFixed` before calling `update` function. the default is depends on `step` value. you can turn it off by setting it to false.

-   **width**(default: **`8`**) : If zone is not supplied. these values is used as the scrubbable area. you can set this value to `"full"` for full width or `"padding"` to use element padding
-   **threshold**(default: **`14`**) : Number of pixels needed to adjust one step, useful for higher precision.
-   **maxAcc**(default: **`2`**) : Limit the acceleration of mouse movement.
-   **zone**: set custom scrubbing area instead of input element. for example, you can set input labels as the scrubbing area.
-   **location**(default: **`left`**) : location of the scrubbing area if zone is not specified
-   **update** : set custom updater function. by default it will update value/textContent depends on element type.
-   **onScrub**(value, increment, config): called when scrubbing

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