Default Marker too small

[talarari]

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:

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.

[jrans]

Haven;t developed on android, if you'd liek to submit a PR please do!

[JaxGit]

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.

[chung-nguyen]

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>
);

}

[bucketclan]

Is this issue resolved? I still seem to have the issue.

[damikdk]

I have the same bug, can you fix it?