@clds/trim-slider

This is trimmer component, it was designed to trim video files

Installation

Install the package using Yarn:

yarn add @cld/trim-slider

Usage

import TrimSlider from '@cld/trim-slider';

const MyComponent = () => {
  return <TrimSlider />;
};

Props

| Name | Required | Type | Default | Description | | -------------------- | -------- | ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | min | No | number | 0 | The minimum value of the slider | | max | No | number | 100 | The maximum value of the slider | | step | No | number | 1 | Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value | | value | No | [number, number] | [min, max] | An array with 2 numbers, the first value will determine the left handle and the second value will determine the right handle | | showTooltip | No | boolean | true | Should a tooltip appear above the handles when dragging it | | disabled | No | boolean | false | Indicates if the slider is disabled | | tooltipValueRenderer | No | function | (value) => value | This allows you to control the value that will be presented inside the tooltip | | onChange | No | function | - | Callback called on every value change. The function will be called with two arguments, the new value(s) and the side that was changed, available values are left, right, both. | | onSlideStart | No | function | - | Callback called on mouse down. The function will be called without any arguments | | onSlideEnd | No | function | - | Callback called on mouse up. The function will be called without any arguments |

Versioning

This library follows Semantic Versioning.

License

See LICENSE