@clds/use-slider

@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