Slider by Akash Kumar

A customizable Slider component for React Native.

Installation

Install the package using npm or yarn:

npm install @akash119911/react-native-slider
# or
yarn add @akash119911/react-native-slider

Usage

Basic Usage

import Slider from '@akash119911/react-native-slider';

<Slider
    height={30}
    width={250}
    minimumValue={0}
    maximumValue={4}
    onValueChange={(index) => console.log(index)}
/>

Usage in a Modal

import React, { useState } from 'react';
import { Modal, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import Slider from 'your-slider-package-name';

const MyComponent = () => {
    const [visible, setVisible] = useState(true);

    return (
        <Modal
            visible={visible}
            onRequestClose={() => setVisible(false)}
            animationType='slide'
            transparent={true}
        >
            <GestureHandlerRootView style={{ flex: 1 }}>
                <View style={styles.container}>
                    <Slider
                        height={30}
                        width={250}
                        minimumValue={0}
                        maximumValue={4}
                        onValueChange={(index) => console.log(index)}
                    />
                </View>
            </GestureHandlerRootView>
        </Modal>
    );
};

Props

| Prop | Type | Description | |-------------- |---------|---------------------------------| | height | number | Height of the slider | | width | number | Width of the slider | | minimumValue | number | Minimum value of the slider | | maximumValue | number | Maximum value of the slider | | onValueChange | function | Callback function for value change |

License

MIT