Radial Slider & Speedometer Component For React Native

This is a React Native component to create animated and beautiful radial sliders and speedometers using SVG.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-native-radial-slider react-native-svg

# NPM
$ npm install react-native-radial-slider react-native-svg
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { RadialSlider } from 'react-native-radial-slider';

2. Create radial sliders or speedometers in your app:

// Default
const RadialVariant = () => {
  const [speed, setSpeed] = useState(0);
  return (
    <View style={styles.container}>
      <RadialSlider value={speed} min={0} max={200} onChange={setSpeed} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});
export default RadialVariant;
// Radial Circle Silder
const RadialVariant = () => {
  const [speed, setSpeed] = useState(0);
  return (
    <View style={styles.container}>
      <RadialSlider
        variant={'radial-circle-slider'}
        value={speed}
        min={0}
        max={200}
        onChange={setSpeed}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});
export default RadialVariant;
// Speedometer
const SpeedoMeterVariant = () => {
  const [speed, setSpeed] = useState(0);
  return (
    <View style={styles.container}>
      <RadialSlider
        variant={'speedometer'}
        value={speed}
        min={0}
        max={200}
        onChange={setSpeed}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});
export default SpeedoMeterVariant;

3. Available props to customize the radial sliders.

radius: 100,
min: 0,
max: 100,
step: 1,
value: 0,
title: '',
subTitle: 'Goal',
unit: 'kCal',
thumbRadius: 18,
thumbColor: Colors.blue,
thumbBorderWidth: 5,
thumbBorderColor: Colors.white,
markerLineSize: 50,
sliderWidth: 18,
sliderTrackColor: Colors.grey,
lineColor: Colors.grey,
lineSpace: 3,
linearGradient: [
  { offset: '0%', color: Colors.skyBlue },
  { offset: '100%', color: Colors.darkBlue },
],
onChange: (_v: number) => {},
onComplete: (_v: number) => {},
openingRadian: Math.PI / 3,
disabled: false,
isHideSlider: false,
isHideTitle: false,
isHideSubtitle: false,
isHideValue: false,
isHideTailText: false,
isHideButtons: false,
isHideLines: false,
isHideMarkerLine: false,
isHideCenterContent: false,
fixedMarker: false,
variant: 'default',
markerValueInterval: 10,

Preview:

Radial Slider & Speedometer Components For React Native

Download Details:

Author: SimformSolutionsPvtLtd

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider

License: MIT

Add Comment