sacmii/rn-vertical-slider

React Native Vertical Slider

rn-vertical-slider's Issues

Component does not re-render with new value when parent is re-rendered.

The initial value set with 'value' prop does work but subsequent changes in value do not rerender the component.

The demo below should be sufficient to reproduce the issue.

I am new to React Native so please correct me if I am doing something wrong.

https://snack.expo.io/@ankitgusai19/re-render-issue-rm-vertical-slider

I have checked the code a bit and to my understanding, the 'value' that is passed in the prop is not used directly, rather a different state variable 'value' is computed and used in render method. This computation is only triggered by componentDidMount()

How to change value use javascript code

invarient violation: Module HMRClient is not a registered callable module(calling setup)

i don't know is react native issue or what after installing libeary it wont refresh..

Is it intended to be so slow?

Trying it out, but the delay between the gesture and the actual change of the slider is pretty huge.
Is it intended to be so, or configurable?

There is something wrong ...when update to 1.1.0

when i try to upgrade this libraries to 1.1.0 ...

Invariant Violation: [263, "RCTView",{"height": "<<NaN>> "}] is not usable as a native method argument

Error is thrown randomly whenever the slider is touched, not dragged.
The slider also jumps to max value when touched.

Code used: (darkGrey and grey are exported constant hex values)

            <VerticalSlider
                borderRadius={5}
                height={275}
                maximumTrackTintColor={darkGrey}
                max={this.props.max || 255}
                minimumTrackTintColor={grey}
                min={0}
                onChange={this.props.onValueChange}
                step={1}
                value={this.props.value}
                width={32}
            />

Not working in scrollview

Hi,
if I place the component in a ScrollView swiping on the screen will scroll the page even when touching directly the component. Can anyone suggest a solution?
Thank you

can publish new version in npm ?

I found this rep update 16 days ago
but when i want to solve the ' useNativeDriver'
npm version is not publish .
please update the npm version
thankes

BallIndicator result with float

The issue

Sometime when I drag the slider, the ballIndicator show me some float values with a lot of decimal

In the props of the VerticalSlider I have

step = {0.2}

The bug

What I've try

the function

_updateSliderX(value){

}

are called by the props

          onChange={(value) => {
            this._updateSliderAlcool(value)
          }}

I've try to fixed the number of decimal by

number.toFixed(1)

then reput him in a float by

parseFloat(number)

However nothing to do.

Like you see, in my console the number are correct(with 1 decimal), however in the ballIndicator they are wrong.

The expected behavior

I would like number with only 1 or 2 decimal, and not a bug like this if it's possible.

Thanks for your help

Your sliders are beautiful !!

Docs are wrong and latest version breaks usage inside a scrollview

The latest 4.0.0 switches to using react-native-gesture-handler for handling scrolling of the slider. This breaks usage inside a scroll view. It also requires the outside code to stick a <GestureHandlerRootView> wrapper around their app.

Also, the current docs in the README.md are for the interface in the 3.1.1 version...they're not updated for 4.0.0.

How can i put decimals values to the slider?

I'm trying to put a decimal values to the render, please help meee

this is my idea

and this is how it is now

onComplete is broken on 3.1.0

React-native: 0.70.1
React-native-reanimated: 2.12.0

onComplete doesnt work at all (onChange works as expected) on 3.1.0 but on 2.0.2 works as expected.
No errors/warnings are shown on.
Changing properties during runtime also doesnt work.

Slider not responding to touch interaction

I can't seem to get this slider to actually respond to interactions. I've attempted placing the component in an otherwise-empty screen (nested within SafeAreaView > View, with no other components on the screen).

I'm using [email protected], [email protected], and I'm seeing this problem iOS (both simulator and physical device).

onComplete never gets triggered on web

No matter what I do onComplete is never called when the gesture ends:

import { Text, SafeAreaView, StyleSheet } from 'react-native';
import {useState} from 'react'
import VerticalSlider from 'rn-vertical-slider';

export default function App() {
  const [text,setText] = useState('not started')
  return (
    <SafeAreaView style={styles.container}>
      <Text>{text}</Text>
      <VerticalSlider
        min={0}
        max={1}
        step={0.05}
        value={0}
        width={20}
        height={100}
        onChange={()=>{
          setText('dragging')
        }}
        onComplete={() => {
          console.log('i am never called');
          setText('done')
        }}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

https://snack.expo.dev/g8-IGyiOx73T5kzMxqjNJ?platform=web

value设置成了最小值-100，最大值100 当前值0 时候的问题

为什么设置成了最小值-100，最大值100 当前值0 时候

需要点击一下才能变成正常位置

crash when using reaniamted v3

Can you update the dependency?

Cannot read property 'prototype' of undefined

Followed the installation instructions, seems to just plain not work. Is this not maintained?

Feature: Support multi-touch for two sliders to be used at the same time on Android

Just a note, I achieved this by ignoring the onChange function of the sliders and updating the value attribute of the sliders based on this example: https://docs.swmansion.com/react-native-gesture-handler/docs/gesture-handlers/api/pan-gh#example

So to achieve multiple slider control at the same time, overlay this example (but in Y direction) over your slider and use this as the control mechanism to update the slider's value. This will allow you to control multiple sliders at the same time.

Assuming you adapted the above gesture handler example:

  _onPanGestureEvent = Animated.event([{ nativeEvent: { y: _touchY } }], {
    useNativeDriver: true,
    listener: e => {
      let flipped = -1 * e.nativeEvent.translationY;
      updateYourSliderValue(flipped + 100);  // +100 assumes your slider starts in the middle (100) and your slider is 0 to 200
    },
  });

Then you can duplicate this for however many fingers your users need to use at the same time to move all your apps sliders at the same time.

ball indicator not updating

The problem lies with the component should update

shouldComponentUpdate(nextProps, nextState) {
  if (nextProps.value && nextProps.value !== nextState.value) {
    this._changeState(nextProps.value);
  }
  return false;
}

By making this u are preventing the component from rerendering

importing results in an error?

Whenever I try to import the module by import VerticalSlider from 'rn-vertical-slider'; it gives me the following error

error: bundling failed: Error: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "/Users/dhirajsaharia/Dropbox/Projects/TestApp/front_end/node_modules/rn-vertical-slider"

Please help.

When slider got re-rendered with a new onChange prop, it won't be triggered

I noticed that if the component got re-rendered with a new onChange/onComplete prop, it won't be used. This is due to how the panResponder is created in https://github.com/sacmii/rn-vertical-slider/blob/master/src/index.tsx#L168, which is a Ref that never updates.

Feature request: support tap events, and not just gestures

Hello!

Great project, thank you!

I have a feature request. I was wondering if it is possible to add support to tap events.

For example:

The user taps on the slider and a new onTap function will execute with the closest value detected from the tap:

onTap={(value) => {
  // ...
}}