Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
@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 7,492 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.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.