I have a specific sliders. How can I style them? I use react-native-slider. Here my code(I modified code from this example):

    render() {
        const sliderStyle = {
            sliderDummy: {
                width: 200,
                height: 80,
                position: 'absolute',
            },
            sliderReal: {
                backgroundColor: colors.primary,
                width: (this.state.slideValue / 50) * 200,
                height: 80,
                borderBottomRightRadius: 100,
                borderTopRightRadius: 100
            }
        }
        return (
            <View style={styles.container}>

                <View style={{overflow: 'hidden'}}>
                    <View style={{flexDirection: 'row', position: 'absolute'}}>
                        <View style={sliderStyle.sliderDummy}></View>
                        <View style={sliderStyle.sliderReal}></View>
                    </View>
                <Slider
                    style={{width: 200, height: 80}}
                    minimumValue={0}
                    maximumValue={50}
                    value={this.state.slideValue}
                    onValueChange={(value)=> this.setState({ slideValue: value}) }
                    maximumTrackTintColor='transparent'
                    minimumTrackTintColor='transparent'
                    thumbStyle={styles.thumb}
                />
                    <Text>{this.state.slideValue}</Text>
                </View>
            </View>
        );
    }
}

When I swipe right I have round corners in the middle of track:

But I need something like this:

Where is my mistake? Thanks.

I have a specific sliders. How can I style them? I use react-native-slider. Here my code(I modified code from this example):

    render() {
        const sliderStyle = {
            sliderDummy: {
                width: 200,
                height: 80,
                position: 'absolute',
            },
            sliderReal: {
                backgroundColor: colors.primary,
                width: (this.state.slideValue / 50) * 200,
                height: 80,
                borderBottomRightRadius: 100,
                borderTopRightRadius: 100
            }
        }
        return (
            <View style={styles.container}>

                <View style={{overflow: 'hidden'}}>
                    <View style={{flexDirection: 'row', position: 'absolute'}}>
                        <View style={sliderStyle.sliderDummy}></View>
                        <View style={sliderStyle.sliderReal}></View>
                    </View>
                <Slider
                    style={{width: 200, height: 80}}
                    minimumValue={0}
                    maximumValue={50}
                    value={this.state.slideValue}
                    onValueChange={(value)=> this.setState({ slideValue: value}) }
                    maximumTrackTintColor='transparent'
                    minimumTrackTintColor='transparent'
                    thumbStyle={styles.thumb}
                />
                    <Text>{this.state.slideValue}</Text>
                </View>
            </View>
        );
    }
}

When I swipe right I have round corners in the middle of track:

But I need something like this:

Where is my mistake? Thanks.

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Feb 18, 2019 at 14:48 KeylorNavasKeylorNavas 15111 gold badge33 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I solved this problem easier way than expected. I just set trackStyle(react-native-slider) and this worked like a charm. But now I have another problem, how get slider style track like a "zebra".

render() {
        return (
            <View style={styles.container}>
                <Slider
                    style={{width: 150, height: 80}}
                    minimumValue={this.state.min}
                    maximumValue={this.state.max}
                    value={this.state.min}
                    onValueChange={(value)=> this.setState({ slideValue: value}) }
                    maximumTrackTintColor='transparent'
                    minimumTrackTintColor={colors.primary}
                    thumbStyle={styles.thumb}
                    trackStyle={styles.track}
                    step={1}
                />

                <Text>{this.state.slideValue}</Text>
                <Text>min {this.state.min}</Text>
                <Text>max {this.state.max}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    thumb: {
        width: 50,
        height: 80,
        backgroundColor: colors.primary,
        borderBottomRightRadius: 100,
        borderTopRightRadius: 100,

    },
    track:{
        height: 80,
        borderBottomRightRadius: 20,
        borderTopRightRadius: 20,
    }
});