How to set the slider width to fit the parent View

[bjdash]

I have a <View> with style flex:1 which is filling its parent View. Now I want to place the slider inside the view (with flex:1) and I am expecting it to fit to the parent. But the property sliderLength only expects number and I couldn't find any other properties to achieve this.

Does this library support this by any means?

[ptomasroos]

No that is sadly not possible

[ptomasroos]

I believe that now that overflow is being brought into Android we could actually use the onLayout hook back and recalculate this based on the parent the slider is inserted into

[vantuan88291]

Have one way i have used, you can get width of parent view and set slide Length follow width of parent view, example:

getSizeSeekBar = (event) => {
    this.setState({widthSeekBar: event.nativeEvent.layout.width})
    console.log('size', event.nativeEvent.layout)
  }
<View
              onLayout={this.getSizeSeekBar}
              style={styles.rightSeek}>
              <Text style={{marginRight: 10}}>0</Text>
              <MultiSlider
                containerStyle={{
                  marginTop: 2
                }}
                values={[this.state.values[0], this.state.values[1]]}
                sliderLength={this.state.widthSeekBar - 75}
                customMarker={CustomMarker}
                selectedStyle={{
                  backgroundColor: Colors.MainColor
                }}
                onValuesChange={this.multiSliderValuesChange}
                min={0}
                max={100}
                step={1}
              />
              <Text style={{position: 'absolute', right: 10}}>100</Text>

            </View>

[AlixH]

Use the Dimensions API of RN if the parent has a known width. e.g if you parent has a marging of 10 to the screen: Dimensions.get('window').width - 10