renderThumb: not working using styled component

[vdhyani-binary]

const thumb = (props, state) => <StyledThumb {...props}>{state.valueNow}; renderTumb ={Thumb}

above code is showing overlap all the thumb with single showing track, when i used below code instead of above now i can see all track with all the thumb but now i am not getting Thumb rapup. not working so i used

renderThumb={(props, state) => <div style={{border:'1px solid black',margin:'20px'}} {...props}>{state.valueNow}

[stonebk]

Have you looked at the very last example in the documentation? It is using styled-components and renderThumb: https://zillow.github.io/react-slider/

[vdhyani-binary]

yes! i have used in same way

[stonebk]

Are you referring to the fact that your border and margin is not showing up?

The render function passes style as one of the props that you are spreading onto the div, and since it comes after your own style attribute, it is overriding it.

You need to merge the style objects if you want to use inline styles like that.

renderThumb={(props, state) => <div style={{border:'1px solid black',margin:'20px', ...props.style}} {...props}>{state.valueNow}}