Open talarari opened 8 years ago
Haven;t developed on android, if you'd liek to submit a PR please do!
It seems Marker1 has been cropped/clipped by parent panHandler view / trackTwo view and Marker2 has been cropped/clipped by parent trackThree view. However applying removeClippedSubviews={false} to any parent view is not working.
I fixed this issue by modifying the render method of Slider. The markers were clipped, so I simply moved them out from their parents.
render() {
var {positionOne, positionTwo} = this.state;
var {selectedStyle, unselectedStyle, sliderLength} = this.props;
var twoMarkers = positionTwo;
var fixedPositionOne = Math.floor(positionOne / this.stepLength) * this.stepLength;
var fixedPositionTwo = Math.floor(positionTwo / this.stepLength) * this.stepLength;
var trackOneLength = fixedPositionOne;
var trackOneStyle = twoMarkers ? unselectedStyle : selectedStyle;
var trackThreeLength = twoMarkers ? sliderLength - (fixedPositionTwo) : 0;
var trackThreeStyle = unselectedStyle;
var trackTwoLength = sliderLength - trackOneLength - trackThreeLength;
var trackTwoStyle = twoMarkers ? selectedStyle : unselectedStyle;
var Marker = this.props.customMarker;
var {slipDisplacement, height, width, borderRadius} = this.props.touchDimensions;
var touchStyle = {
height: height,
width: width,
borderRadius: borderRadius || 0
};
return (
<View style={[styles.container, this.props.containerStyle]}>
<View style={[styles.fullTrack, { width: sliderLength }]}>
<View style={[this.props.trackStyle, styles.track, trackOneStyle, { width: trackOneLength }]} />
<View style={[this.props.trackStyle, styles.track, trackTwoStyle, { width: trackTwoLength }]} />
{ twoMarkers && (
<View style={[this.props.trackStyle, styles.track, trackThreeStyle, { width: trackThreeLength }]} />
) }
<View
style={[styles.touch, touchStyle, {left: -(trackTwoLength + trackThreeLength + width / 2)}]}
ref={component => this._markerOne = component}
{...this._panResponderOne.panHandlers}
>
<Marker
pressed={this.state.onePressed}
value={this.state.valueOne}
markerStyle={this.props.markerStyle}
pressedMarkerStyle={this.props.pressedMarkerStyle}
/>
</View>
{ twoMarkers && (positionOne !== this.props.sliderLength) && (
<View
style={[styles.touch, touchStyle, {left: -(trackThreeLength + width * 1.5)}]}
ref={component => this._markerTwo = component}
{...this._panResponderTwo.panHandlers}
>
<Marker
pressed={this.state.twoPressed}
value={this.state.valueOne}
markerStyle={this.props.markerStyle}
pressedMarkerStyle={this.props.pressedMarkerStyle}
/>
</View>
) }
</View>
</View>
);
}
Is this issue resolved? I still seem to have the issue.
I have the same bug, can you fix it?
tried using this on android , not sure if its an android issue or a general one. this is the line im using: <MultiSlider containerStyle={{height:50}} values={[1,5]} step={1} sliderLength={280} onValuesChange={x=> {console.log(x)}} />
and this is what is rendered:![multi_slider_bug](https://cloud.githubusercontent.com/assets/4973087/12369362/7209a45c-bbfe-11e5-8085-ed9bf814975e.png)
i tried debugging it a bit, it seems like the marker view being inside the trackview is affected by its style so it can be bigger then the track.