Suggestion

[mrshahzeb7]

Kindly add functionality for linear-gradient instead of using "renderRail,renderRailSelected" we can do that if you allow single component that will render both we can pass linear gradient view there thankyou i hope you understand

[githuboftigran]

@mrshahzeb7 , we can't do that. The component is optimized so it won't re-render if not necessary. And it's achieved by using Animated api of react native. So the selected rail's left and right are animated without re-rendering. If we use an external rail component, we will have to pass current value with props every time it changes and that component will be re-rendered.

[mrshahzeb7]

okay I am trying it, I will share solution if found Thankyou

[githuboftigran]

Thank you too

[mrshahzeb7]

This is how i used your slider till now

Achieved multiple color by giving responsive width(full size of slider) to selected rail and made that rail using "react-native-linear-gradient "

[justin-tufte]

@mrshahzeb7 I was actually looking to do something very similar to your first example that goes from green to red. Did you find a solution? I will share if I get it working.

[justin-tufte]

@mrshahzeb7 I think this solution works fairly well. Basically apply your gradient to either Rail or RailSelected then make the other transparent.

  return (
    <View
      style={{
        flex: 1,
        height: 6,
      }}>
      <LinearGradient
        style={{flex: 1, opacity: 0.5, borderRadius: 10}}
        colors={['#3D83FB', '#A350C8', '#FF229A']}
        start={{x: 0, y: 0}}
        end={{x: 1, y: 0}}
      />
    </View>
  );
};

const RailSelected = () => {
  return (
    <View
      style={{
        flex: 1,
        height: 6,
        width: '100%',
        backgroundColor: 'transparent',
      }}
    />
  );
};```

[githuboftigran]

@justin-tufte , in that case you don't need to make it transparent, just return null: () => null

[mrshahzeb7]

@justin-tufte yes i did the same thing but it only worked on selectedRail!

[githuboftigran]

@mrshahzeb7 , can I close this issue then? BTW @mrshahzeb7 , @justin-tufte could you please share some thoughts about this package? Is it good? Is it bad? Are these render functions ok or it would be better to just set styles to fixed components? I wanted this slider to be extremely flexible so users can customize the UI in any way they like. But that requires more effort even if you need a basic slider with solid colors.

[mrshahzeb7]

closed it! It's good and light weighted ,I don't know much about how you are avoiding rerender so can't say anything! yes that is the only drawback but its one time effort the above examples i shared, it is only one component and i am using it everywhere

[githuboftigran]

Cool, thanks for the feedback!

[justin-tufte]

@githuboftigran So far so good! I've just started to implement it but its been quick and easy.