@internetarchive/scrubber-bar

<scrubber-bar>

A customizable scrubber bar useful for scrubbing through media.

Installation

yarn add @internetarchive/scrubber-bar

Usage

// scrubber-bar.js
import ScrubberBar from '@internetarchive/scrubber-bar';
export default ScrubberBar;

<!-- index.html -->
<script type="module">
  import './scrubber-bar.js';
</script>

<style>
  scrubber-bar {
    --thumbColor: white;
    --thumbBorder: 1px solid white;
    --trackFillColor: blue;
    --trackColor: purple;
    --trackBorder: 1px solid black;
    --trackBorderRadius: 5px;
    --trackHeight: 10px;
    --thumbDiameter: 20px;
    --scrubberBarHeight: 20px;
    --thumbBorderRadius: 10px;
    --webkitThumbTopMargin: -6px;
  }
</style>

<scrubber-bar id="scrubberbar"></scrubber-bar>

<script>
  const scrubberBar = document.getElementById('scrubberbar');

  // listen for value changes
  scrubberBar.addEventListener('valuechange', e => {
    console.log('Value has changed, new value:', e.detail.value);
  });

  // set a different value
  scrubberBar.value = 23;
</script>

Development

Prerequisite

yarn install

Start Development Server

yarn start  // start development server and typescript compiler

Testing

yarn test

Testing via browserstack

yarn test:bs

Demoing using storybook

yarn storybook

Linting

yarn lint