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!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. 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 [email protected]