Package Exports

rn-vertical-slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rn-vertical-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎛️ rn-vertical-slider

A highly customizable vertical slider component for React Native using React Native Gesture Handler and Reanimated. Support this project with a ★ on Github.

📥 Installation

You can install this package using either Yarn or NPM.

npm install rn-vertical-slider

yarn add rn-vertical-slider

rn-vertical-slider requires react-native-reanimated and react-native-gesture-handler to be installed, which are peer dependencies.

💡 Usage

import React, { useState } from 'react';
import { View } from 'react-native';
import VerticalSlider from 'rn-vertical-slider';

function App() {
  const [value, setValue] = useState(0);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <VerticalSlider
        value={value}
        onChange={(value) => setValue(value)}
        height={200}
        width={40}
        step={1}
        min={0}
        max={100}
        borderRadius={5}
        minimumTrackTintColor="#2979FF"
        maximumTrackTintColor="#D1D1D6"
        showIndicator
        renderIndicator={() => (
          <View
            style={{
              height: 40,
              width: 80,
              backgroundColor: '#2979FF',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <Text style={{ color: '#fff' }}>{value}</Text>
          </View>
        )}
        containerStyle={{ backgroundColor: '#e0e0e0', borderRadius: 10 }}
        sliderStyle={{ backgroundColor: '#fff', borderRadius: 5 }}
      />
    </View>
  );
}

📖 Props

Property	Type	Default	Description
min	number	0	Minimum value of the slider
max	number	100	Maximum value of the slider
step	number	1	Step value for the slider
width	number	350	Width of the slider
height	number	30	Height of the slider
borderRadius	number	5	Border radius of the slider
maximumTrackTintColor	string	'#3F2DA5'	Color of the track for the maximum value
minimumTrackTintColor	string	'#77ADE6'	Color of the track for the minimum value
disabled	boolean	false	Whether the slider is disabled
onChange	function	() => {}	Callback function called when the slider value changes
onComplete	function	() => {}	Callback function called when the slider value change is complete
value	number	0	Current value of the slider
showIndicator	boolean	false	Whether to show the value indicator
renderIndicatorHeight	number	40	Height of the custom indicator
renderIndicator	function	() => null	Function to render a custom indicator
containerStyle	object	{}	Custom styles for the slider container
sliderStyle	object	{}	Custom styles for the slider

🎨 Demo

You can try the example app by cloning this repo and running the following commands:

cd example
yarn install
npx expo start

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you find a bug or have a feature request. See the contributing guide to learn how to contribute to the repository and the development workflow.

📜 License

This project is licensed under the MIT License.