Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Increase size of the slider thumb in react-native on android

Is there a way to make slider's button/thumb (that green circle) bigger, to set height and width. In iOS, it looks nice, but on Android is so small.

enter image description here

like image 520
peronja Avatar asked Nov 23 '17 15:11

peronja


People also ask

How do I change the size of the thumb in react native slider?

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

What is slider in react?

The ReactJS Slider component represents a versatile Slider that allows the user to choose from a range of values by moving their thumb along a track.


2 Answers

Apply this on element style:

transform: [{ scaleX: 1.5 }, { scaleY: 1.5 }]
like image 99
perija Avatar answered Oct 23 '22 18:10

perija


As of now, there is no props that you can supply to the slider component to make the thumb bigger. Of-course you can customise the thumb for iOS as per react-native documentation but not for android.

There is library that you can make use of here -> react-native-slider

This is a pure javascript library that make use of Animated and PanResponder.

like image 35
Manoj Prabhakar Avatar answered Oct 23 '22 19:10

Manoj Prabhakar