React Native Rounded Slider

A customisable circular slider component using react native.

Installation

npm: npm install react-native-rounded-slider

yarn: yarn add react-native-rounded-slider

Prototype

circular.slider.1.mp4

circular.slider.2.mp4

Example:

import { useState } from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import CircularSlider from "react-native-rounded-slide";

export default function App() {
  const [value, setValue] = useState(0);
  return(
    <View style={styles.container}>
      <CircularSlider
        onChange={setValue}
        size={300} 
        min={0}
        max={100}
        trackWidth={7}
        trackColor={"green"}
        thumbColor={"blue"}
        thumbWidth={15}
        steps={1}
        element={<Text style={{position: "absolute", alignSelf:"center"}}>{value}</Text>}
      />
    </View>
  ); 
}

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

Props

Property Type Default Value Description
min number 0 Lower bound of circular slider
max number 100 Upper bound of circular slider
thumbWidth number 15 thumbwidth of circular slider
thumbColor string “black” thumb color of circular slider
trackWidth number 10 Width of circular track
trackColor string “black” track color of circular slider
steps number 1 Steps of value taken by slider
size number 300 Size of circular slider component
onChange (required) function ()=>{} Operation to perform on value change in slider
element React Component <></> React component to show on middle of slider

GitHub

View Github