miblanchard / react-native-slider Goto Github PK
View Code? Open in Web Editor NEWA pure JavaScript <Slider> component for react-native and react-native-web
License: MIT License
A pure JavaScript <Slider> component for react-native and react-native-web
License: MIT License
2 thumb sliders doesnt work
Hey,
I found this library today and I'm really excited about it. Great work, thank you. I really appreciate the ability to customize the styles to match our designs so that I don't need to write the component myself to get the styles we need.
I noticed a renderBelowThumbComponent
prop in the master branch that has not yet been published to npm. That would be really helpful. Are there plans for a new release soon?
Thanks.
Hi, thanks for this awesome fork!
However, I was wondering how can I add a or any other component in track, and this component will be overlap when the slider pass through.
Something similar to this.
https://github.com/Roxyhuang/react-slide-captcha
Currently I am using renderTrackMarkComponent
but I don't think it is a correct way to use it.
Any suggestion?
When trying to implement your component, I get this error:
./node_modules/@miblanchard/react-native-slider/lib/index.js 53:22
Module parse failed: Unexpected token (53:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| if (Array.isArray(values) && Array.isArray(newValues)) {
return values?.map((value, index) => {
| let valueToSet = newValues[index];
| if (value instanceof Animated.Value) {
I used the same implementation as shown in example.
Currently the renderAboveThumbComponent
prop takes a function that takes index as a parameter. I don't understand how that is useful.
Instead if it can return the current value that the thumb is at, it would be useful to render a tooltip above the slider.
Hi.
i got this error when i change the value of slider
attempting to disconnect view that has not been connected with the given animated node
NPM fails to install the latest version of this package (2.0.0) because of a failing postinstall script.
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @miblanchard/[email protected] postinstall: `patch-package`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @miblanchard/[email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Thanks for your component is great.
I just miss being able to change the style of each track separately. For example maxiumTrack height and miniumTrack height separately.
If you can add minimumTrackStyle and maximumTrackStyle it would be great
Thanks
For some reason, this no longer works in the current version:
<Slider
thumbStyle={[styles.thumb, thumbStyles]}
/>
onValueChange
isn't fired as it used to after upgrading from 1.4.0 to 2.0.1. It's not fired at all. onSlidingComplete
does fire as before.
For some reason the track marks are not rendered on the first render. My work around looks like this:
onLayout={() => setTimeout(() => setMarks(trackMarks), 1000)}
When the parent component of the slider is updated while the user is moving the slider knob, a subtle lag can appear, this can be worse if the onValueChange
trigger a setState that re-renders the whole DOM.
This part of the code seems to be the cause, maybe we could add a boolean prop to tell if we should let this part trigger ? Or is there another solution ?
Hi there,
I'm using the slider as such
<SliderContainer sliderValue={value} trackMarks={trackMarks}>
<Slider
minimumValue={minimumValue}
maximumValue={maximumValue}
step={step}
renderAboveThumbComponent={(index) => {
console.log('Here 1: ' + index);
if (!renderAboveThumbComponent || !renderAboveThumbComponent(index))
return undefined;
const iconName = renderAboveThumbComponent(index);
return (
<Box left={-16}>
{/*@ts-ignore*/}
<Icon name={iconName} fontSize={50} />
</Box>
);
}}
/>
</SliderContainer>
But the index does not update when I move the slider thumb.
Log always prints
Here 1: 0
When using two thumbs, with maximum and minimum track colors, the track's colors are not animated.
Code for the slider below. I'm updating the state as a result of onSlidingComplete firing, which is why the track color appears after the slider stops moving. It re-renders, which moves the color over.
<Slider
trackClickable={true}
animateTransitions={true}
value={[item.start[0], item.end[1]]}
minimumValue={0}
maximumValue={30}
trackMarks={[0, 10]}
step={1}
thumbTouchSize={{width: 30, height: 30}}
thumbTintColor="#FFFFFF"
thumbStyle={{
borderColor: Palette.gray,
borderWidth: 0.5,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 2,
},
shadowRadius: 1,
shadowOpacity: 0.1,
}}
minimumTrackTintColor={Palette.s1}
maximumTrackTintColor="#CECECE"
trackStyle={{
height: 1,
}}
onSlidingComplete={value =>
changeRange(item.name, value[0], value[1])
}
/>
I am using an iOS style thumb style, as in the examples. I have set shadowOffset: { width: 0, height: 2 }
and it works, but as soon as I press the thumb, the shadow offset height is gone and the thumb looks like shadowOffset: { width: 0, height: 0 }
.
On Android, elevation
works as expected.
Need props to style minimum and maximum tracks differently.
In my case I need different heights and border radius.
Hi @miblanchard
i'm using react-native 0.63 and react-native-web 0.13 and run this command
expo start:web
got this error, any suggestion will help
thanks in advance
First off, funny that you are also a codesmith guy. I was cohort 12. Nice work on this component! Using it for our video player at Openpath and the renderAboveThumbComponent prop is super useful. Only issue is that I am unable to add pointerEvents="none", as the wrapper needs to have that prop in order to allow touch events to flow through. I have a fullscreen button that is covered by the component and I am unable to press it when the thumb is below it. Normally I would just hide the component conditionally on seek, but in this case I can't and just adjust the opacity accordingly. Not sure the best solution to this, but simply another prop called something like renderAboveThumbComponentHasTouchEvents which defaults to true would do the trick.
I didn't have time to investigate further (I switched to a different package), but there's something wrong with _thumbHitTest on vertical sliders. Here's a video:
In this video, debugTouchArea
was set to true and trackClickable
was set to false.
(If you're on Firefox, the browser will complain that the video is corrupt for some reason. it's not; use a different browser).
Is there a way to not let the user bring the slider back? for example, set it on 30 from 100, and not let the user go behind 30.
Hi, it seems that when a track mark is rendered at the same value as the max value it will render at an incorrect position - to the left of the track end rather than at the end. See screenshot below where the track mark on the right should be rendering at the track end.
Can be replicated by modifying the example snack listed in the README with the one below:
<SliderContainer caption="<Slider/> with track marks" sliderValue={[1]} trackMarks={[0, 7, 17]}> <Slider maximumValue={17} minimumValue={0} step={1} /> </SliderContainer>
Hi, when I tried your expo snack on my iPhone, I realized that there is no vertical scroll lock, as long you're sliding. Is there a way to prevent scrolling while sliding (without getting the ScrollViews ref and manipulation scrollEnabled true/false)
I have a problem when i try to select the Value 0 of the slider. I've set a default value of value = 5
, min = 0
and max =10
. When i try to select the value 0 the slider goes back to the middle but if i changed the minimumValue
for example to min = 1
it works . My code is :
<Slider containerStyle={styles.slider} renderThumbComponent={() => ( <Image width={24} height={24} style={{ width: 24, height: 24 }} source={THUMB_IMG} /> )} minimumValue={min} maximumValue={max} value={value} step={1} onValueChange={([v]) => { onChange(v); }} trackStyle={{ height: 8, borderRadius: 30 }} minimumTrackTintColor={globalStyles.colors.bleu800} maximumTrackTintColor={globalStyles.colors.bleu800} />
Hello i'm new here,
Just a question, when will you update the npm/yarn package (for minimumTrackStyle and maximumTrackStyle ) ? Or do I have a way to work with this project as react native package ?
There is a problem when RTL is true.
Code :
<_Slider value={0.5} minimumValue={0} maximumValue={1} minimumTrackTintColor="red" maximumTrackTintColor="blue" />
Output :
https://i.ibb.co/yqsm8PC/output.png
Expected:
https://i.ibb.co/s5xTgmH/expected.png
or:
https://i.ibb.co/w42GsJg/or-expected.png
As in title, would be great if I could supply two different components per sliders.
I suggest extending renderThumbComponent
to accept array of ReactNodes just like values does.
This patch adds only trackMarksClickable which is needed by me in a project, maybe someone too need this type of feature:
We can't seem to get this slider to work with a11y OS features. Specifically, it becomes unresponsive with any kind of screen reader enabled, and can't be tapped or moved, making it unusable. Is this a known issue? This affects iOS and Android.
How do I render two thumbs ?
Hi.
I am unable to upgrade my packages to the latest version when using this library.
Could you please have a look at this.
npm update
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR! peer react@">=16.8.0" from @miblanchard/[email protected]
npm ERR! node_modules/@miblanchard/react-native-slider
npm ERR! @miblanchard/react-native-slider@"^1.5.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from [email protected]
npm ERR! node_modules/react-native
npm ERR! react-native@"^0.64.0" from the root project
npm ERR! peer react-native@">=0.59.0" from @miblanchard/[email protected]
npm ERR! node_modules/@miblanchard/react-native-slider
npm ERR! @miblanchard/react-native-slider@"^1.5.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\alen\AppData\Local\npm-cache\eresolve-report.txt for a full report.
There is some conflict between the packages, even thought in your page it says that i should not have problem upgrading react-native
and react
Please export types such as:
I'm unable to use these types to define my own component basing on this one.
Edit:
Found out SliderProps is possible to import from
@miblanchard/react-native-slider/lib/types
SliderOnChangeCallback is not exported from anywhere though.
I need a vertical slider, but when I set the containerStyle
prop with:
{
transform: [{rotate: '-90deg'}],
}
The slider is displayed correctly but it does not react as expected to touch events. I can tap on the track and the thumb moves more or less to the correct position, but it doesn't otherwise follow the movement of the finger.
The debugTouchArea seems to be correct tho.
Currently, the slider thumb hovers slightly to the right of the actual position of the user's finger on the screen. This behavior makes it so that sliders which touch the left side of a screen are impossible to set to their minimum value by manually sliding.
I tried to workaround this by mapping the value received by onValueChanged
to the full range of the slider and setting the slider value to the new mapped value, which worked but lead to flickering since the slider is not a controlled component.
If the slider were a controlled component that would solve my issue, but if that is impossible, or if there is a reason that it shouldn't be controlled, would there be a way to interpolate my finger drag to a wider range? It would be similar to adjusting scrub speed on a video player seekbar.
I am using react-native-web-hooks to add hover effects for web. But it doesn't seem to work inside on renderThumbComponent
.
Reproduce: https://snack.expo.io/@dcangulo/hover-not-working
As you can see when I render <CustomThumb />
outside the renderThumbComponent
, it works as expected. But if I put it inside renderThumbComponent
, the hover effect stops working.
Using css :hover
also does not work.
I'm getting this error when trying to use the web version of this component. How can I resolve this issue? It works properly on mobile.
./node_modules/@miblanchard/react-native-slider/lib/index.js 53:22
Module parse failed: Unexpected token (53:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| if (Array.isArray(values) && Array.isArray(newValues)) {
> return values?.map((value, index) => {
| let valueToSet = newValues[index];
| if (value instanceof Animated.Value) {
I cannot smoothly slide the slider, but only click on the track to move the thumb. Is that expected behavious?
<Slider
thumbTouchSize={{ width: 50, height: 50 }}
containerStyle={[styles.sliderContainer, elevation]}
style={styles.slider}
trackStyle={{marginLeft: 10}}
minimumValue={30}
maximumValue={100}
minimumTrackTintColor={colors.highlight}
maximumTrackTintColor={colors.otherElements}
onValueChange={value => dispatch(setRadius(value))}
step={10}
value={radius} />
when i do full screen in ios it is showing native controls how do i show custom controls?
Please check out example #8 from the snack https://snack.expo.dev/@miblanchard/@miblanchard-react-native-slider
Click on the center of the thumb
Expected: Thumb stays at position because center of thumb matches center touch area
Actual: The thumb moves to the right
If thumbStyle
width equals thumbTouchSize
width, everything is fine. But if they differ this behaviour can be seen.
Hello,
I know the vertical slider functionality was only added recently but it would be good if this parameter could be added to the parameter list in the documentation.
Also, not sure if it was caused by the vertical slider functionality, but when activated, height and width style props are back to front. i.e. the height controls the width and the width controls the height.
Thanks for a fantastic package.
First of all, I'd like to thank you for providing this library - it has been extremely useful for my projects.
I've recently been seeing an error when trying to open a component using the Slider -
Invariant Violation: inputRange must be monotonically non-decreasing
This crashes the app on first use, but works on the subsequent launches.
Here's my environment info -
System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 856.17 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 15.12.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.6.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK:
API Levels: 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.3
System Images: android-28 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7351085
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_271 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.4 => 0.63.4
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Is there any way to write a test case for the slider? When I try to write test case but I am unable to find testID in the slider module.
Here's an example of my implementation:
<Slider
value={2}
step={1}
maximumValue={4}
onValueChange={value => {
// why is this an array?
value = Array.isArray(value) ? value[0] : value;
setValue(value);
}}
thumbTintColor={secondaryTextGray}
minimumTrackTintColor={secondaryTextGray}
maximumTrackTintColor={dividerBorderGray}
/>
I recently ran into a bug in my app which in some scenarios caused it to set the minimumValue
prop to be greater than the maximumValue
prop. This in turn caused the slider to throw a Invariant Violation: inputRange must be monotonically non-decreasing
exception.
Perhaps it's not really an issue since the props are not supposed to be set like that, but I thought someone might find the information useful. Thanks for writing this great library! :)
When you enable trackClickable on slider with tracks slider rounds the value towards the left. Can you add some customization for that or just normal round?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.