Nutmeg Pumpkin Macchiato

    scrubbable

    2.0.2 • Public • Published

    Scrubbable

    Live Demo

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

    Preview

    image

    Example

    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

    Live

    More examples in 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

    Install

    npm i scrubbable

    DownloadsWeekly Downloads

    0

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    42.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • alqurafi