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

[kimmy-wang]

+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

[defi-bear]

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

[arthur-vargas]

+1

[SamiChab]

+1 for this feature !

[vaionescu]

+1

[congtung98]

+1

[antonsokolow]

+1

[afilp]

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

[qasim90]

Any plans on adding this feature?

[edi]

Bump :)

[GiulioFede]

This is my solution for those who do not want to use external libraries for any reason (for example the homonymous react-native-vector-icons of Expo does not support the Icon.getImage method):

import { ... , Platform } from 'react-native'
let containerHeight = ...  // this is the height of the area inside which you will insert the slider

<View style={{flex:1, height: containerHeight}}>
      <View style={
                   {
                       height: containerHeight, 
                       transform: [{ scaleX: Platform.OS=="ios"?0.5:1 }, { scaleY: Platform.OS=="ios"?0.5:1 }]}}>
                            <Slider
                                value = {...}
                                onValueChange = {...}
                                style={
                                     {
                                          flex:1, 
                                          height: containerHeight , 
                                          width: Platform.OS=="ios"?"200%":"100%", 
                                          alignSelf:"center"
                                     }
                                }
                                thumbTintColor="..."
                                ...
                            />
       </View>
</View>

For my app it was fine that the icon was scaled by half, so I applied a scale of 0.5 and a width of 200%. In general, given a scale of x, apply a width of 100 * (1 / x) %.

[hammerstrike331]

I suggest below plugin. this is perfect work for me. https://github.com/miblanchard/react-native-slider

[nangbanmai1907]

thumbImage={require('link_img')} it work for me!

[izolotarev]

This is my solution for those who do not want to use external libraries for any reason (for example the homonymous react-native-vector-icons of Expo does not support the Icon.getImage method):

import { ... , Platform } from 'react-native'
let containerHeight = ...  // this is the height of the area inside which you will insert the slider

<View style={{flex:1, height: containerHeight}}>
      <View style={
                   {
                       height: containerHeight, 
                       transform: [{ scaleX: Platform.OS=="ios"?0.5:1 }, { scaleY: Platform.OS=="ios"?0.5:1 }]}}>
                            <Slider
                                value = {...}
                                onValueChange = {...}
                                style={
                                     {
                                          flex:1, 
                                          height: containerHeight , 
                                          width: Platform.OS=="ios"?"200%":"100%", 
                                          alignSelf:"center"
                                     }
                                }
                                thumbTintColor="..."
                                ...
                            />
       </View>
</View>

For my app it was fine that the icon was scaled by half, so I applied a scale of 0.5 and a width of 200%. In general, given a scale of x, apply a width of 100 * (1 / x) %.

That is a good solution! Thanks! It really helped. I tried a few other slider packages and most of them suck. Based on your solution I have written a Wrapper that fixes this issue.

import Slider, { SliderProps } from '@react-native-community/slider';
import { View, Platform } from 'react-native';

type SliderWrapperProps = SliderProps & { scaleIOS: number; scaleAndroid: number; height: number };

function SliderWrapper(props: SliderWrapperProps) {
  const { scaleIOS, scaleAndroid, height } = props;
  const widthIOS = 100 * (1 / scaleIOS);
  const widthAndroid = 100 * (1 / scaleAndroid);

  return (
    <View style={{ width: '100%', height }}>
      <View
        style={{
          height,
          transform: [
            { scaleX: Platform.OS === 'ios' ? scaleIOS : scaleAndroid },
            { scaleY: Platform.OS === 'ios' ? scaleIOS : scaleAndroid },
          ],
        }}>
        <Slider
          {...props}
          style={{
            flex: 1,
            height,
            width: Platform.OS === 'ios' ? `${widthIOS}%` : `${widthAndroid}%`,
            alignSelf: 'center',
          }}
        />
      </View>
    </View>
  );
}

export default SliderWrapper;

[anasomar1]

I am using a local URI image on iOS and I found out that you can pass a scale, which helped me change the size. You also can pass width and height but that doesn't seem to do anything.

thumbImage={{ uri: "seeker@3x.png", scale: 3 }}

[timbtimbtimb]

+1

[iostalks]

Rename local file image with @3x, image will scale itself.

[lavisar]

update Jun 26 2024, there still no props to custom Thumb Button size =(