@clds/use-slider

use-slider

This is a React hook that simplifies the creation of slider components It supports vertical sliders from left to right and from right to left All the calculations are done in percentages, so the sliders are fully responsive

Installation

Install the package using Yarn:

yarn add @cld/use-slider

Usage

import useSlider from '@cld/use-slider';
import { SliderContainer, Slider } from './components';

const MyComponent = () => {
  const { onPointerDown, percentage } = useSlider();

  return (
    <SliderContainer>
      <Slider
        onPointerDown={onPointerDown}
        style={{ left: percentage + '%' }}
      />
    </SliderContainer>
  );
};

Props

| Name | Required | Type | Default | Description | | ---------------------- | -------- | -------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | containerRef | No | Ref | the parent element of the slider | this allows you to provide another element that will be treated as the container of the slider | | stateReducer | No | function | - | this function allows you to modify the next state of the slider(currentState, newState, dataTagValue) => nextState | | onChange | No | function | - | this function is called whenever there is a change, it does not take in consideration the result of stateReducer, you should use it if you want to manage the state by yourself(newState, dataTagValue) => void | | isRTL | No | boolean | false | Let you choose if you want to use the left or right attribute to control the position of the slider | | sliderRef | No | Ref | pointerDown event target element | this allows you to provide another element that will be treated as the slider element | | sliderOffsetPx | No | number | 0 | If you don't want the slider to reach to the end of the container you can set an offset (in pixels), it will take place for both sides | | onSlideStart | No | function | - | This function will be called before the slider is starting to move (onPointerDown) | | onSlideEnd | No | function | - | This function will be called after the slider is finished to move (onPointerUp) | | initialValue | No | number | 0 | This is the initial value for the slider | | dataTagAttribute | No | string | - | You can provide an attribute name that it's value will passed to the stateReducer, this can help to identify which element initiate the move | | keepSliderInBoundaries | No | boolean | false | When the element left/right is set to 100% the element will get outside of the container, by setting this to true the left/right value will be limited so the element will stay inside the container |

Return attributes

| Name | Type | Description | | ------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | | onPointerDown | function | This is the callback function that triggers the slider, you should pass it to the relevant component | | percentage | number | This is the value that should be used to set the slider component left/right style | | setPercentage | function | This let you manually set the state of the slider percentage, you should not use it unless you need to modify the state externally |

Versioning

This library follows Semantic Versioning.

License

See LICENSE