Skip to content

A little (horizontal) animated slider component for React Native.

License

Notifications You must be signed in to change notification settings

candlefinance/slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

cb867e1 · Nov 22, 2022

History

8 Commits
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022
Nov 22, 2022
Nov 21, 2022
Nov 21, 2022
Nov 21, 2022

Repository files navigation

Slider

A little (horizontal) animated slider component for React Native. Inspired by rn-vertical-slider.

Features

  • Vanilla React Native animation API
  • Compatible with Expo, try it out in the snack

Caveats

  • This implementation of the pan gesture animation runs on the JS thread.

Installation

yarn add @candlefinance/slider

Usage

Check out the example project for a demo project.

import Slider from '@candlefinance/slider';

<Slider
  value={myValue}
  disabled={false}
  min={1}
  max={99}
  onChange={(value) => {
    console.log('CHANGE', value);
    setMyValue(value);
  }}
  onComplete={(value) => {
    console.log('COMPLETE', value);
  }}
  width={300}
  height={54}
  step={1}
  maximumTrackTintColor="#c7c7c7"
  minimumTrackTintColor="#ff0067"
  ballIndicatorColor="#4f4f4f"
  ballIndicatorTextColor="#ffffff"
/>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT