React-native-range-slider-alzion NPM

react-native-range-slider-alzion

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 react-native-range-slider-alzion

Usage

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

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.