Color sticks out when using react-slider

[Moai101]

Now,I'm using react-slider. When a thumb reached 100%, color sticks out like following picture. How can I fix it ?

This is my css code.

    .vertical-slider {
    height: 100%;
    width: 50px;

  }

  .example-thumb {
    background: radial-gradient(50% 50% at 50% 50%, #F4F4F4 0%, #DDDDDD 100%);

  }

  .example-thumb-0 {
    width: 0px;
    height: 0px;
    background: transparent;
    border: solid transparent;
    border-radius: 0px;

  }

  .example-side {
      width: 50px;
      height: 10px;
      background: radial-gradient(50% 50% at 50% 50%, #F4F4F4 0%, #DDDDDD 100%);
      border-radius: 2px;
      border-bottom: 5px  transparent;

  }

  .example-track {
    background:linear-gradient(180deg, #8ABF72 0%, rgba(138, 191, 114, 0.5) 5%, #8ABF72 100%);

  }

  .example-track.example-track-0 {

    background: linear-gradient(180deg, #C9D561 0%, rgba(201, 213, 97, 0.5) 51.56%, #C9D561 100%);;

} 

  .example-track.example-track-1 {

    background: linear-gradient(180deg, #C9D561 0%, rgba(201, 213, 97, 0.5) 51.56%, #C9D561 100%);

} 

  .example-track.example-track-2 {

    background: linear-gradient(180deg, #F3DA6B 0%, rgba(243, 218, 107, 0.5) 51.56%, #F3DA6B 100%);

}

  .example-track.example-track-3 {
    background: linear-gradient(180deg, #E7A05F 0%, rgba(231, 160, 95, 0.5) 51.56%, #E7A05F 100%);
  }

  .example-track.example-track-4 {

    background: linear-gradient(180deg, #DB7EA8 0%, rgba(219, 126, 168, 0.5) 50%, #DB7EA8 100%);

}

  .example-track.example-track-5 {
    background: linear-gradient(180deg, #B56EA6 0%, rgba(181, 110, 166, 0.5) 51.56%, #B56EA6 100%);
  }

  .example-track.example-track-6 {
    background: linear-gradient(180deg, #99CBD9 0%, rgba(153, 203, 217, 0.5) 51.56%, #99CBD9 100%);
  }

  .example-track.example-track-7 {
    background: linear-gradient(10deg, #5E9BA8 0%, rgba(94, 155, 168, 0.5) 51.56%, #5E9BA8 100%);
  }

  .vertical-slider .example-thumb {
    width: 48px;
    height: 10px;

  }

  .vertical-slider .example-track {
    left: 20px;
    width: 10px;

  }

This is my react native code.

import React, { useState } from 'react'
import { View, StyleSheet, TouchableOpacity } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'

// constants
import { primaryColor } from 'app/src/constants/colors'

// components
import { Text, Button } from 'app/src/components/basics'
import { DonationSelectView } from 'app/src/components/advanced/donation-select'
import { Footer } from 'app/src/components/advanced/footer'
import ReactSlider from 'react-slider'

import 'app/src/components/advanced/portfolio/portfolio-slider.css'

type Props = {
  history: any
}

export const DonationAreaList: React.FC<Props> = () => {

    const [portion,setPortion] = useState([0,20,40,50,60,70,80,90])  

  return (
    <LinearGradient colors={['#FAFAFA', '#F4F4F4']} style={styles.portfolioListContainer}>

      <Text>{JSON.stringify(portion)}</Text>

      <Text style={styles.description}>
        設定をしておくと、上記の総寄付可能額は以下の割合で月末に寄付されます。自分の関心あるエリアを設定してください。
      </Text>

<View style={styles.portfolioPosition}>

  <View>

<ReactSlider
className="vertical-slider"
thumbClassName="example-thumb"
trackClassName="example-track"
defaultValue={[0,20,40,50,60,70,80,90]}
onChange={function(value:number[]){
  setPortion(value)
}}
renderThumb={function(props,state){
return  <div {...props}></div> 
} 
}
orientation="vertical"
invert
minDistance={0}
/>
<div className="example-side"></div>
  </View>
  <View>
  <DonationSelectView area={1} />
      <DonationSelectView area={2} />
      <DonationSelectView area={3} />
      <DonationSelectView area={4} />
      <DonationSelectView area={5} />
      <DonationSelectView area={6} />
      <DonationSelectView area={7} />
      <DonationSelectView area={8} />
  </View>

</View>
      <Button style={styles.saveButton} buttonType={4} onPress={() => {}}>
        この比率で設定する
      </Button>
      <Text style={styles.description}>
        皆様の想いが届くよう、日々努力しておりますが、寄付先についてご意見・ご要望がある場合は
        <TouchableOpacity>
          <Text style={styles.link}>お問い合わせ</Text>
        </TouchableOpacity>
        よりご連絡ください。
      </Text>
      <Footer />
    </LinearGradient>
  )
}
const styles = StyleSheet.create({
  portfolioPosition:{

      flexDirection: 'row'

  },
  portfolioListContainer: {
    alignItems: 'center',
    paddingVertical: 15,
  },
  description: {
    width: 320,
    justifyContent: 'center',
    marginBottom: 21,
  },
  saveButton: {
    marginTop: 18,
    marginBottom: 30,
  },
  link: {
    color: primaryColor,
    textDecorationLine: 'underline',
  },
})

[Sheldonfrith]

Having same issue

[Sheldonfrith]

I solved my issue. I did a codesandbox to try to reproduce it for this issue, but the slider worked properly on codesandbox so I figured the problem was on my end (and it was). In the end the solution for me was removing all padding and margins on the thumb element (I had default styles applied to all divs that were the cause of the issue). In general though I would recommend looking at what default styles you have that might be applying to your thumb, track, or the slider itself and try removing them.

[stonebk]

Hi @Moai101 , if this is still an issue for you, can please reproduce the problem in a codesandbox? It makes it A LOT easier for me debug any potential issues. You can click the link below:

Once a sandbox is created, I'd be happy to reopen this and look into the issue for you.