@remirage/react-native-wheel-input v1.0.0

react-native-radial-input-slider

About

react-native-radial-input-slider is a React Native component that provides a radial slider with an integrated input field for direct value entry. It allows users to select a specific value using a circular slider while also offering a text input for precise adjustments.

Features:

✅ Radial Slider: Smooth, circular value selection. ✅ Direct Input: Users can enter values manually. ✅ Customizable: Modify colors, sizes, and behaviors. ✅ Dynamic Updates: Syncs values instantly. ✅ Ideal for Transactions: Perfect for selecting amounts, budgets, or other numerical inputs.

🎬 Preview

Radial Input Slider

Installation

npm install react-native-radial-input-slider react-native-svg
# or
yarn add react-native-radial-input-slider react-native-svg

For iOS, run:

cd ios && pod install

Usage

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { RadialInputSlider } from 'react-native-radial-input-slider';

const Example = () => {
  const [value, setValue] = useState(50);

  return (
    <View style={styles.container}>
      <RadialInputSlider value={value} min={0} max={100} onChange={setValue} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});

export default Example;

Properties

Example

A full working example project is here Example

yarn
yarn example ios   // For ios
yarn example android   // For Android

License

This project is licensed under the MIT License.

Credits

This package was inspired by react-native-radial-slider by Simform. The original package provided the base implementation for radial sliders, which was adapted and enhanced for this library.