React-native-slider: How to adjust the size of the thumb button

[noecs]

...
<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

[harrydema]

+1

[bobber205]

I've found it'll be whatever the size of your image natively is -- reduce the image dimensions and it'll go down in the app too (bad solution I know :( )

[OmarBasem]

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

[Eesssn]

+1

[realkimmy]

+1

[Cosmitar]

I'm solving this issue using an icon as image since I have installed react-native-vector-icons.

Icon.getImageSource('circle', 15, 'white')
   .then(source => this.setState({ thumbIcon: source }));

later in Slider component

<Slider
   ...
   thumbImage={this.state.thumbIcon}
/>

The thumb shows the size and color specified on getImageSource method.

[yesnoyes]

transform: [{scaleX: 0.3}, {scaleY: 0.3}],

[VTrngNghia]

I'm solving this issue using an icon as image since I have installed react-native-vector-icons.

Icon.getImageSource('circle', 15, 'white')
   .then(source => this.setState({ thumbIcon: source }));

later in Slider component

<Slider
   ...
   thumbImage={this.state.thumbIcon}
/>

The thumb shows the size and color specified on getImageSource method.

This didn't work for me. getImageSource() gets called indefinitely and caused my app UI to be completely blocked.

[Cosmitar]

I'm solving this issue using an icon as image since I have installed react-native-vector-icons.

Icon.getImageSource('circle', 15, 'white')
   .then(source => this.setState({ thumbIcon: source }));

later in Slider component

<Slider
   ...
   thumbImage={this.state.thumbIcon}
/>

The thumb shows the size and color specified on getImageSource method.

This didn't work for me. getImageSource() gets called indefinitely and caused my app UI to be completely blocked.

Maybe you're calling Icon.getImageSource into render function?
try something like

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [icon, setIcon] = useState();

  useEffect(() => {
    Icon.getImageSource('circle', 15, 'white')
     .then(setIcon);
  }, []);

  <Slider
    ...
    thumbImage={icon}
  />
};

or use the equivalent componentDidMount in class component approach. The idea is that getImageSource's callback is affecting the state and render the component again, so move Icon.getImageSource() call outside the render loop.

[kgsachinthaudara]

The team should need to give access to change thumb size

[gxs1619]

Thumb size would be very useful to change as a property

[Shing-Ho]

use this https://github.com/Shing-Ho/react-native-slider

[arthur-vargas]

+1

[SamiChab]

+1 for this feature !

[vaionescu]

+1

[cucauthongminh]

+1

[antonsokolow]

+1

[afilp]

Please add this feature, it is very important. Thanks.

[qasim90]

Any plans on adding this feature?

[edi]

Bump :)