1

I have designed a custom player view by using react-native-slider. There are multiple sliders arranged in this view. I am playing one audio file by following the sliders which are arranged in a FlatList component. All slider having its minimum and maximum value difference is 5 seconds.

Audio is playing as expected in each slider, but I need to tap on any of the slider position to set my current slider cursor on the same place. I am trying to get the position when click on the slider. The following methods :

onValueChange onTouchStart onTouchEnd

have no help to get the position/value on tap on any of the slider.

Following is the slider implementation in my code :

<Slider
                  key={index}
                  step={1}
                  onTouchStart={this.onSliderEditStart}
                  onTouchEnd={this.onSliderEditEnd}
                  value={sliderValue}
                  onValueChange={this.onSliderEditing}
                  maximumValue={item.endTime}
                  minimumValue={item.startTime}
                  animateTransitions
                  // maximumTrackTintColor='transparent'
                  maximumTrackTintColor={'#000'}
                  minimumTrackTintColor={'#d3d3d3'}
                  thumbStyle={{height: 55, width: 2.5}}
                  thumbTintColor={currentTime >= item.endTime ? 'transparent' : '#000066'}
                  trackStyle={{height: 55, backgroundColor: '#E6E6E6'}}
                />

Please help to find out the solution if any.

Following is the implementation I have done. The cursor is moving in the first slide and I want to click on the second one at a time. It should place the cursor on that position. Since both slides are having different minimum and maximum value.

TechValens
  • 437
  • 6
  • 20

0 Answers0