react-native-epic-slider

React Native Epic Slider

A highly customizable and feature-rich slider component for React Native with support for custom thumbs, points, floating labels, and more.

Features

• 🎨 Fully customizable design
• 👆 Smooth touch interactions
• 🏷️ Custom floating labels
• 🎯 Track points support
• 📏 Custom track and thumb sizes
• 🎭 Custom thumb component
• 🔢 Decimal and step value support
• 🎨 Rich styling options

Installation

# Using npm
npm install react-native-epic-slider

# Using yarn
yarn add react-native-epic-slider

# Using pnpm
pnpm add react-native-epic-slider

Basic Usage

import Slider from 'react-native-epic-slider';

const App = () => {
  return (
    <Slider
      min={0}
      max={100}
      value={50}
      onChange={(value) => console.log('Current value:', value)}
    />
  );
};

Advanced Usage

import Slider from 'react-native-epic-slider';

const App = () => {
  const CustomThumb = () => (
    <View style={styles.customThumb}>
      <Text>📍</Text>
    </View>
  );

  const CustomFloatingLabel = ({ value }) => (
    <View style={styles.labelContainer}>
      <Text style={styles.labelText}>{value}%</Text>
    </View>
  );

  return (
    <Slider
      min={0}
      max={100}
      value={50}
      step={5}
      showFloatingLabel={true}
      FloatingLabel={CustomFloatingLabel}
      Thumb={CustomThumb}
      points={[
        { value: 25, color: '#FF5733' },
        { value: 50, color: '#33FF57' },
        { value: 75, color: '#3357FF' },
      ]}
      thumbColor="#2196F3"
      trackColor="#E0E0E0"
      onChange={(value) => console.log('Current value:', value)}
    />
  );
};

Props

Prop	Type	Default	Description
min	number	0	Minimum value of the slider
max	number	100	Maximum value of the slider
value	number	-	Current value of the slider
step	number	1	Step value for incrementing/decrementing
onChange	function	-	Callback function when value changes
allowDecimal	boolean	false	Allow decimal values
showValue	boolean	true	Show current value above slider
valuePrefix	string	''	Prefix for the displayed value
valueSuffix	string	''	Suffix for the displayed value
trackColor	string	'#E5E4E2'	Color of the unfilled track
thumbColor	string	'#22223B'	Color of the thumb and filled track
trackHeight	number	4	Height of the slider track
trackWidth	number	-	Width of the slider track
thumbSize	number	20	Size of the thumb
disableTrackTouch	boolean	false	Disable touch interaction with track
Thumb	component	-	Custom thumb component
points	array	[]	Array of points to display on track
showFloatingLabel	boolean	false	Show floating label while dragging
FloatingLabel	component	-	Custom floating label component
trackStyles	style	-	Additional styles for track
trackProgressStyles	style	-	Additional styles for progress track

Points Props

Each point in the points array can have the following properties:

Prop	Type	Description
value	number	Value at which to display the point
color	string	Color of the point
size	number	Size of the point
customPoint	component	Custom component for the point

Contributing

Feel free to submit issues and enhancement requests!

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Your Name

• GitHub: @hardik27111
• npm: react-native-epic-slider

Support

If you found this project helpful, please consider giving it a ⭐️!

Donation

If you find my projects and contributions helpful, consider supporting me. Your support means a lot and helps me continue creating and sharing more cool stuff.

Hire

I'm a skilled React and React Native developer ready to help with your project. Let's create something great together! Contact me [e-mail]