be able to use color gradient in minimumTrackTintColor

[ViktorAksionov]

Right now it possible to use only 1 color, but not a list of colors which can create a nice gradient when user drag a slider thumb

[olekspickle]

Any update on this?

[emmanuellmota]

@ViktorAksionov @alexgnatrow @sidd123456

Use this fork: https://github.com/emmanuellmota/react-native-slider

Ex:

<Slider
  minimumValue={1}
  maximumValue={100}
  step={1}
  customMinimumTrack={(
    <LinearGradient
      start={{x: .74, y: .26}}
      end={{x: 0, y: .77}}
      colors={['#ff8960', '#ff62a5']}
      style={{
        width: '100%',
        height: '100%',
      }}
    />
  )}
  customMaximumTrack={(
    <LinearGradient
      start={{x: .74, y: .26}}
      end={{x: 0, y: .77}}
      colors={['#efefef', '#c1c0c9']}
      style={{
        width: '100%',
        height: '100%',
      }}
    />
  )}
  customThumb={(
    <LinearGradient
      start={{x: .74, y: .26}}
      end={{x: 0, y: .77}}
      colors={['#ff8960', '#ff62a5']}
      style={{
        width: 36,
        height: 36,
        margin: 2,
        borderRadius: 36 / 2,
        borderWidth: 4,
        borderColor: '#fff',
        elevation: 1
      }}
    />
  )}
/>

[nikasvan]

@emmanuellmota I get this error when I implemented your fork https://cl.ly/0V2e450y3d1g

[nikasvan]

Any suggestions?

[emmanuellmota]

@nikasvan You can share your code?

[nikasvan]

Hey @emmanuellmota thanks for the answer. Sorry just saw the comment. here is my code https://cl.ly/3X101S0M0T3A

[nikasvan]

The bug goes away when I remove custom props. customMinimumTrack, customMaximumTrack and customThumb. Is there something I am doing wrong?

[nikasvan]

Hey @emmanuellmota checked out the example that you commited 2 days ago and it seems to work, thanks :)

[lucasriondel]

@emmanuellmota could you make a pull request ?

[ViktorAksionov]

As I can see you used https://github.com/react-native-community/react-native-linear-gradient for gradient. That is required to link code and it will force author to publish as major version.

I can describe approach which I implemented in my project and which in reality gives very nice visual effect, so anyone can use the same idea.

Right now we already have minimumTrackTintColor, so on each drag of thumb we can constantly change color there.

For example if we have range [min, max] with step equal to step then you can in advance generate an array of colors with size of (max - min) / step, like(copy/paste from my code):

...
import transition from 'some path';
...

this.gradientList = transition(
   this.props.fromGradientColor || '#FFFFFF', // from white
   this.props.toGradientColor || '#000000', // till black
   (this.props.max - this.props.min) / this.props.step,
);

and then use minimumTrackTintColor={this.gradientList[value - min]}

that is it.

[emmanuellmota]

@ViktorAksionov

Not necessarily, you can use any component, leaving it to whoever is developing, in the example above I used the react-native-linear-gradient, because the question was around the gradient, which I agree with if it is just for the gradient, your code is the correct one, however my alteration was just so you can use the custom component, an SVG for example as a thumb or track.

[lucasriondel]

@jeanregisser what's your point of view on this ?

[tuannkop]

@nikasvan thank u so much , its working good :D

[tuannkop]

@nikasvan its working good on ios but on android stlyle height customtrack seem not working .

[cspicuzza]

It would be fantastic if these custom component features for track and thumb were merged into this repo 🙏

[huydophu]

customMinimumTrack

hi man, we already implemented your suggestion but nothing happen! Is there anything we have to add or remove to make the attribute "customMinimumTrack" work?

[huydophu]

Hey @emmanuellmota checked out the example that you commited 2 days ago and it seems to work, thanks :)

@nikasvan I also implemented the code like yours but it seems not recognize the attribute "customMinimumTrack", could you please show me your work or tell me what should do more to make it work? Many thanks.

[ghost]

@emmanuellmota I implemented the code with customThumb but nothing happened.

<Slider
                    style={{width: 185, 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}
                    customThumb={<View
                      style={{
                        width: 50,
                        height: 80,
                        backgroundColor: colors.primary,
                        borderBottomRightRadius: 100,
                        borderTopRightRadius: 100,
                      }}
                    />}
                    trackStyle={styles.track}
                    step={1}
                />

[ghost]

I need thumb like circle with text, in my code I just tried to get circle but have only standard thumb

[emmanuellmota]

@emmanuellmota I implemented the code with customThumb but nothing happened.

<Slider
                    style={{width: 185, 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}
                    customThumb={<View
                      style={{
                        width: 50,
                        height: 80,
                        backgroundColor: colors.primary,
                        borderBottomRightRadius: 100,
                        borderTopRightRadius: 100,
                      }}
                    />}
                    trackStyle={styles.track}
                    step={1}
                />

I need thumb like circle with text, in my code I just tried to get circle but have only standard thumb

@andriko007, check if you are using my fork: https://github.com/emmanuellmota/react-native-slider

Take a look this example at Expo: https://snack.expo.io/@emmanuellmota/custom-slider

[ghost]

@emmanuellmota thanks, it was my mistake. Now I have problem with animation, slider is too slow animation. Is there a way to make animation faster and smoother? My animation example

What I expected

Here is my code:

<Slider
            style={{width: 150, height: 80}}
            minimumValue={50}
            maximumValue={100}
            value={50}
            maximumTrackTintColor='transparent'
            minimumTrackTintColor={colors.primary}
            onValueChange={(value)=> this.props.onSetQuantity({index: this.props.index, value: value}) }
            thumbStyle={{
    width: width 40,
    height: 80,
    backgroundColor: colors.primary,
    borderBottomRightRadius:100,
    borderTopRightRadius: 100
    justifyContent: 'center',
    alignItems: 'center'}}
            trackStyle={{height: 80,
    borderBottomRightRadius: 20,
    borderTopRightRadius: 20,}}
            step={1}
            animationConfig={Animated.timing({useNativeDriver: true})}
            animateTransitions={true}
          />

[emmanuellmota]

@andriko007, I've tested my example above, and is running smooth, here we have best practices to implement smooth animations in you React Native app: https://facebook.github.io/react-native/docs/performance, https://codeburst.io/butter-smooth-animations-in-react-native-93a3b86adf1

[ghost]

@emmanuellmota So, can I implement this practices with animationConfig? I tried to change this config but nothing happened, may be I did something wrong? animationConfig={Animated.timing({useNativeDriver: true})}

[emmanuellmota]

@andriko007, I made one change in my folk, added useNativeDriver, you can download again and check if is run smooth.

[ghost]

@emmanuellmota Unfortunately it didn't help

[emmanuellmota]

@andriko007, my example that I mentioned above, runs well, or is it also slow?

[ghost]

@emmanuellmota Yes, your example work well. I can't understand, why slider get slow(it seems like low fps) in my example

[emmanuellmota]

@andriko007, you can separate all components that you are using, and go adding one by one, to know which makes slow.

[bcosma]

@emmanuellmota I have an issue when enabling animateTransitions. I get an error: “Style property ‘width’ is not supported by native animated module”. Do you know what could be the problem? I am testing on the iOS simulator.