Socket
Socket
Sign inDemoInstall

@clds/use-slider

Package Overview
Dependencies
1
Maintainers
0
Versions
47
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@clds/use-slider


Version published
Maintainers
0
Created

Readme

Source

@clds/use-slider


npm version

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

NameRequiredTypeDefaultDescription
containerRefNoRefthe parent element of the sliderthis allows you to provide another element that will be treated as the container of the slider
stateReducerNofunction-this function allows you to modify the next state of the slider
(currentState, newState, dataTagValue) => nextState
onChangeNofunction-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
isRTLNobooleanfalseLet you choose if you want to use the left or right attribute to control the position of the slider
sliderRefNoRefpointerDown event target elementthis allows you to provide another element that will be treated as the slider element
sliderOffsetPxNonumber0If 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
onSlideStartNofunction-This function will be called before the slider is starting to move (onPointerDown)
onSlideEndNofunction-This function will be called after the slider is finished to move (onPointerUp)
initialValueNonumber0This is the initial value for the slider
dataTagAttributeNostring-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
keepSliderInBoundariesNobooleanfalseWhen 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

NameTypeDescription
onPointerDownfunctionThis is the callback function that triggers the slider, you should pass it to the relevant component
percentagenumberThis is the value that should be used to set the slider component left/right style
setPercentagefunctionThis 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

FAQs

Last updated on 09 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc