
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
@clds/use-slider
Advanced tools
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
Install the package using Yarn:
yarn add @cld/use-slider
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>
);
};
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 |
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 |
This library follows Semantic Versioning.
See LICENSE
FAQs
---
We found that @clds/use-slider demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.