A customisable circular slider component using react native
source link: https://reactnativeexample.com/a-customisable-circular-slider-component-using-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
Recommend
-
87
Vue Glide Vue component on top of the Glide.js Documentation
-
12
react-native-circular-picker (WIP) Apple Card circular picker component in react native. Installation 1. Instal...
-
8
@miblanchard/react-native-slider A pure JavaScript version of the <Slider> component for react-native and react-native-web. This can be a direct replacement for the Slider component from react-native/@react-native-...
-
9
react-native-avatar-crop Highly customisable Crop component for React Native. Usage
-
8
Slider A customizable React Native component that implements an Image Slider UI Au...
-
31
React Native Arc Slider Arc Slider Component for React Native using React Native SVG :rocket: Getting Started Install Install the library and react-native-svg npm i --save rn-arc-...
-
4
Quiz A customisable quiz app made in React Native Sep 07, 2021...
-
23
Interacting with the Webflow Slider Component using Alpine.jsA real-world example.Photo by Philipp Lublasser on
-
3
Clock React Native customisable clocks built with react-native-skia Sep 23, 2022 1 min read ...
-
1
CSS Infinite and Circular Rotating Image Slider ...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK