rn-ticker-range-slider v0.1.3

rn-range-slider

High performant Range slider for Android and iOS

TickerRangeSlider Component

Overview

TickerRangeSlider is a customizable slider component built using React Native. It allows users to select values from a predefined range using a horizontal slider with tickers of varying heights. The component is equipped with haptic feedback for enhanced user experience and includes a smooth gradient effect on the edges.

Features

• Customizable Tickers: The slider displays alternating tall and short tickers, making it visually appealing and easy to interact with.
• Haptic Feedback: Provides subtle haptic feedback when the user interacts with the slider.
• Gradient Edges: Smooth gradient effects on the sides of the slider enhance the visual design.
• Customizable Colors: The slider's colors can be customized to match the app's theme.
• Snap to Interval: Automatically snaps to defined intervals for precise value selection.

Installation

npm i rn-range-slider

Usage

import React, { useState } from 'react';
import { TickerRangeSlider } from 'rn-range-slider';

const App = () => {
  const [sliderValue, setSliderValue] = useState(0);

  return (
    <TickerRangeSlider
      color="blue"
      sliderRange={92} // Set the range of the slider
      setSliderValue={setSliderValue} // Function to update the slider value
    />
  );
};

export default App;

Props

• color: (string) - The color of the slider tickers and central marker.
• sliderRange: (number) - The number of tickers on the slider, defining the range.
• setSliderValue: (function) - Callback function to set the selected slider value.

Contributing

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

License

MIT

Made with create-react-native-library