Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@react-native-assets/slider
Advanced tools
Lightweight slider for React-Native and React-Native-Web. A Range slider is included
This lightweight version of a slider is fully compatible with React-Native and React-Native-Web. It also provides support for Range slider (with 2 thumbs) and custom thumb rendering.
Try it here!
Have a look at the troubleshooting section if you encounter any issue, or open an issue.
npm i -S @react-native-assets/slider
You can see below the available props with their respective default values.
import { Slider } from '@react-native-assets/slider'
<Slider
value={0} // set the current slider's value
minimumValue={0} // Minimum value (defaults as 0)
maximumValue={0} // Maximum value (defaults as minimumValue + step)
step={0} // The step for the slider (0 means that the slider will handle any decimal value within the range [min, max])
minimumTrackTintColor='grey' // The track color before the current value
maximumTrackTintColor='grey' // The track color after the current value
thumbTintColor='darkcyan' // The color of the slider's thumb
thumbStyle={undefined} // Override the thumb's style
trackStyle={undefined} // Override the tracks' style
minTrackStyle={undefined} // Override the tracks' style for the minimum range
maxTrackStyle={undefined} // Override the tracks' style for the maximum range
vertical={false} // If true, the slider will be drawn vertically
inverted={false} // If true, min value will be on the right, and max on the left
enabled={true} // If false, the slider won't respond to touches anymore
trackHeight={4} // The track's height in pixel
thumbSize={15} // The thumb's size in pixel
thumbImage={undefined} // An image that would represent the thumb
slideOnTap={true} // If true, touching the slider will update it's value. No need to slide the thumb.
onValueChange={undefined} // Called each time the value changed. Return false to prevent the value from being updated. The type is (value: number) => boolean | void
onSlidingStart={undefined} // Called when the slider is pressed. The type is (value: number) => void
onSlidingComplete={undefined} // Called when the press is released. The type is (value: number) => void
CustomThumb={undefined} // Provide your own component to render the thumb. The type is a component: ({ value: number }) => JSX.Element
CustomMark={undefined} // Provide your own component to render the marks. The type is a component: ({ value: number; active: boolean }) => JSX.Element ; value indicates the value represented by the mark, while active indicates wether a thumb is currently standing on the mark
{...props} // Add any View Props that will be applied to the container (style, ref, etc)
/>
You can see below the available props with their respective default values
import { RangeSlider } from '@react-native-assets/slider'
<RangeSlider
range={[0, 0]} // set the current slider's value
step={0} // The step for the slider (0 means that the slider will handle any decimal value within the range [min, max])
minimumRange={0} // Minimum range between the two thumbs (defaults as "step")
minimumValue={0} // Minimum value (defaults as 0)
maximumValue={0} // Maximum value (defaults as minimumValue + minimumRange)
crossingAllowed={false} // If true, the user can make one thumb cross over the second thumb
outboundColor='grey' // The track color outside the current range value
inboundColor='grey' // The track color inside the current range value
thumbTintColor='darkcyan' // The color of the slider's thumb
thumbStyle={undefined} // Override the thumb's style
trackStyle={undefined} // Override the tracks' style
minTrackStyle={undefined} // Override the tracks' style for the minimum range
midTrackStyle={undefined} // Override the tracks' style for the middle range
maxTrackStyle={undefined} // Override the tracks' style for the maximum range
vertical={false} // If true, the slider will be drawn vertically
inverted={false} // If true, min value will be on the right, and max on the left
enabled={true} // If false, the slider won't respond to touches anymore
trackHeight={4} // The track's height in pixel
thumbSize={15} // The thumb's size in pixel
thumbImage={undefined} // An image that would represent the thumb
slideOnTap={true} // If true, touching the slider will update it's value. No need to slide the thumb.
onValueChange={undefined} // Called each time the value changed. Return false to prevent the value from being updated. The type is (range: [number, number]) => boolean | void
onSlidingStart={undefined} // Called when the slider is pressed. The type is (range: [number, number]) => void
onSlidingComplete={undefined} // Called when the press is released. The type is (range: [number, number]) => void
CustomThumb={undefined} // Provide your own component to render the thumb. The type is a component: ({ value: number, thumb: 'min' | 'max' }) => JSX.Element
CustomMark={undefined} // Provide your own component to render the marks. The type is a component: ({ value: number; active: boolean }) => JSX.Element ; value indicates the value represented by the mark, while active indicates wether a thumb is currently standing on the mark
{...props} // Add any View Props that will be applied to the container (style, ref, etc)
/>
The component is probably too narrow. Increase the height of the component to ensure a correct touch area
CustomTrack
component to render the trackonValueChange
callbackRangeSlider
componentrange
prop in RangeSlider
thumbImage
prop (please report if you encounter an issue with it)onLayout
callbackminTrackStyle
prop on Slider and RangeSlidermaxTrackStyle
prop on Slider and RangeSlidermidTrackStyle
prop on RangeSlidercrossingAllowed
prop on RangeSliderminimumRange
prop on RangeSliderAnimatedSlider
and AnimatedRangeSlider
slideOnTap
propIf you have any issue, please fill an issue on our repo
FAQs
Lightweight slider for React-Native and React-Native-Web. A Range slider is included
The npm package @react-native-assets/slider receives a total of 6,757 weekly downloads. As such, @react-native-assets/slider popularity was classified as popular.
We found that @react-native-assets/slider demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.