How to adjust the size of the thumb button about react-native-slider HOT 27 OPEN

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

from react-native-slider.

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

from react-native-slider.

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.

from react-native-slider.

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.

from react-native-slider.

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

from react-native-slider.

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

from react-native-slider.

Bump :)

from react-native-slider.

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

from react-native-slider.

The team should need to give access to change thumb size

from react-native-slider.

Thumb size would be very useful to change as a property

from react-native-slider.

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

from react-native-slider.

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;

from react-native-slider.

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: "[email protected]", scale: 3 }}

from react-native-slider.

+1

from react-native-slider.

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 :( )

from react-native-slider.

+1

from react-native-slider.

+1

from react-native-slider.

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.

from react-native-slider.

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

from react-native-slider.

+1

from react-native-slider.

+1 for this feature !

from react-native-slider.

+1

from react-native-slider.

+1

from react-native-slider.

+1

from react-native-slider.

Any plans on adding this feature?

from react-native-slider.

+1

from react-native-slider.

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

from react-native-slider.