sacmii / rn-vertical-slider

React Native Vertical Slider

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