@devtar/slider v1.0.0

Ephraim Devtar 🎚️

LOGO

Ephraim Slider is a sleek, customizable, and smooth React Native slider designed for seamless user interaction.
It supports gesture-based control, dynamic progress tracking, and a modern UI that enhances any mobile app experience.

✨ Features

✅ Fully customizable (colors, size, animations)
✅ Supports React Native Reanimated for smooth interactions
✅ Gesture-based control using react-native-gesture-handler
✅ Lightweight & high performance
✅ Works with Expo & React Native CLI
✅ Compatible with iOS & Android

📸 Screenshots

Light Mode	Dark Mode

🚀 Installation

Install the package via npm or yarn:

npm install @devtar/slider --save
# or
yarn add @devtar/slider

Also, install required peer dependencies:

npm install react-native-gesture-handler react-native-reanimated react-native-svg

For Expo projects, ensure you have @expo/vector-icons installed:

npm install @expo/vector-icons

🔧 Usage

Basic Example

import DevtarSlider from '@devtar/slider';
import React from 'react';
import { View } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <DevtarSlider
        min={0}
        max={100}
        step={1}
        value={50}
        onChange={(val) => console.log(val)}
      />
    </View>
  );
};

export default App;

Advance Code

import { Text, SafeAreaView, StyleSheet } from 'react-native';
import React from 'react'
// You can import supported modules from npm

import DevtarSlider from '@devtar/slider';

export default function App() {
  const [volume,setVolume] = React.useState(40)
 //is best for your initial value to be the same with your volume value
  return (
    <SafeAreaView style={styles.container}>
    <Text style={{color:"white",fontSize:20, margin:10}}>Vol: {volume}</Text>
      <DevtarSlider
        options={{ //for customizing some properties 
          showIcon: true, // for icon to show true 
          showCounter: true, // to show counter 
          iconColor: '#fff',
          counterColor: '#fff',
          backgroundColor: '#000',
          minimumValue:0,
          maximumValue:100,
          paddingSize:9,
          fillBorderRadius:10,
          widthSize:80,
          initialValue:40,
          iconChange:false,
          ephraimMeta:{
            colorOne:"#000",
            colorTwo:"#333",
            gradientPosition:{x1:1,y1:0,x2:0,y2:2},
            enableStroke:true,
            strokeSize:2,
            strokeColor:"#333",
            innerColor:"#fff"
          },
        }}
        onValueChange={setVolume}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#555',
    padding: 8,
    paddingLeft: 125,
  },
});

🎨 Customization

🚀 Live Demo (Try it on Expo Snack)

Ephraim Slider is highly customizable with props:

📌 Requirements

• React Native 0.68+
• Expo SDK 49+ (for Expo users)
• Peer Dependencies:
  • react-native-reanimated
  • react-native-gesture-handler
  • react-native-svg

🛠️ Development & Contribution

Want to improve Ephraim Slider? Feel free to fork, contribute, or report issues!

1. Clone the repo:

   git clone https://github.com/devtar/slider.git

2. Install dependencies:

   cd slider
   npm install

3. Run the example app (optional):

   cd example && npm start

4. Make changes and create a Pull Request 🚀

Preview

📜 License

This project is licensed under the MIT License. Feel free to use, modify, and distribute it, but you must include attribution.

💬 Support & Contact

For questions, issues, or feature requests, open an issue or contact me at ahitubephriam5@gmail.com/ https://gravatar.com/ahitubephriam5.

CONTACT NUMBER:+2349168033116

🚀 Made with ❤️ by Ephraim Senior Dev