react-native-multi-slider icon indicating copy to clipboard operation
react-native-multi-slider copied to clipboard

Custom Label not moving

Open MathewChanda opened this issue 5 years ago • 1 comments

Is it possible to make the custom label move with the slider similar to the enableSlider default?

<MultiSlider values={[this.state.values[0], this.state.values[1]]} sliderLength={280} onValuesChange={this.multiSliderValuesChange} min={0} max={999} step={1} enableLabel selectedStyle={{ backgroundColor: '#cc0000', }} unselectedStyle={{ backgroundColor: 'silver', }} customLabel={() => <Icon name="Circle"/> />

MathewChanda avatar Jul 25 '20 08:07 MathewChanda

I ran into the same scenario. I was able to get past it by setting position: absolute on the styles of my customLabel component and leverage the arg passed into your customLabel function (sliderPosition in my example) to set the left property like so (adjusted for centering):

customLabel={(sliderPosition) => (
          <View style={{
            height: 20,
            width: 20,
            position: 'absolute',
            left: sliderPosition.oneMarkerLeftPosition - 10,
            bottom: 50
          }}
          />
        )}

MikeDevcore avatar Sep 16 '21 17:09 MikeDevcore