4.4.0 • Published 1 year ago

rn-vertical-slider v4.4.0

Weekly downloads
195
License
MIT
Repository
github
Last release
1 year ago

:control_knobs: 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.

:inbox_tray: 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.

:bulb: 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>
  );
}

:book: Props

PropertyTypeDefaultDescription
minnumber0Minimum value of the slider
maxnumber100Maximum value of the slider
stepnumber1Step value for the slider
widthnumber350Width of the slider
heightnumber30Height of the slider
borderRadiusnumber5Border radius of the slider
maximumTrackTintColorstring'#3F2DA5'Color of the track for the maximum value
minimumTrackTintColorstring'#77ADE6'Color of the track for the minimum value
disabledbooleanfalseWhether the slider is disabled
onChangefunction() => {}Callback function called when the slider value changes
onCompletefunction() => {}Callback function called when the slider value change is complete
valuenumber0Current value of the slider
showIndicatorbooleanfalseWhether to show the value indicator
renderIndicatorHeightnumber40Height of the custom indicator
renderIndicatorfunction() => nullFunction to render a custom indicator
containerStyleobject{}Custom styles for the slider container
sliderStyleobject{}Custom styles for the slider

:art: Demo

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

cd example
yarn install
npx expo start

:handshake: 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.

:scroll: License

This project is licensed under the MIT License.

4.4.0

1 year ago

4.3.0

1 year ago

4.2.0

1 year ago

4.0.0

2 years ago

3.1.1

2 years ago

3.1.0

2 years ago

2.0.2

5 years ago

2.0.1

5 years ago

1.1.0

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago