Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to adjust the size of the thumb button

See original GitHub issue

...
<Slider
    style={styles.scheduleBar}
    minimumValue={0}
    maximumValue={120}
    minimumTrackTintColor="#FFFFFF"
    maximumTrackTintColor="#000000"
    thumbImage={'../styles/dark/dot.png'}
    step={1}
 />
...

How to adjust the size of the thumb button，I checked the issue and found no useful information. Now it works on my page, but the thumb button is too big and looks very ugly

Issue Analytics

State:
Created 4 years ago
Reactions:48
Comments:24

Top GitHub Comments

39reactions

OmarBasemcommented, Jan 21, 2020

I think there should be a prop for the thumb size. This is very basic.

29reactions

Rohan-Rajeshcommented, Dec 12, 2021

The answer is pretty simple just provide the thumbStyle prop with a width and height, here is an example:

<Slider
        style={styles.slider}
        minimumValue={0}
        maximumValue={1}
        minimumTrackTintColor="#00296B"
        maximumTrackTintColor="#C4C4C4"
        thumbTintColor="#00296B"
        thumbStyle={{width: 15, height: 15}}
/>