Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
@sharcoux/slider
Advanced tools
Lightweight slider for React-Native and React-Native-Web. A Range slider is included
Weekly downloads
Readme
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
maximumValue={1} // Maximum value
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. The type is (value: number) => 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, 1]} // set the current slider's value
minimumValue={0} // Minimum value
maximumValue={1} // Maximum 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")
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. The type is (range: [number, number]) => 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
There is an open issue on React Native project. Meanwhile, you can widen the Slider area using paddings if needed.
range
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 @sharcoux/slider receives a total of 1,856 weekly downloads. As such, @sharcoux/slider popularity was classified as popular.
We found that @sharcoux/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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.