Skip to content

React Native component to select or highlight a specific value from a range of values πŸ‘Œ ✨

License

Notifications You must be signed in to change notification settings

SimformSolutionsPvtLtd/react-native-radial-slider

Repository files navigation

Radial Slider - Simform

react-native-radial-slider

react-native-radial-slider on npm react-native-radial-slider downloads react-native-radial-slider install size Android iOS MIT


This is a pure javascript and react-native-svg based library that provides many variants of Radial Slider and Speedo Meter including default, radial-circle-slider, speedometer and speedometer-marker

Radial Slider allows you to select any specific value from a range of values. It comes with two variants, one is default which allows selection on a 180-degree arc and the second one is 360-degree which allows selection of values on a complete circle. It can be used to select/set goals, vision, range, etc.

The Speedo Meter allows you to highlight a specific value from a range of values. It comes with two variants, the default one shows a needle and another one shows marking values with a needle. It can be used to display the speed of the internet, vehicle, fan, etc.

This library is easy to use and provides you complete customization, so you can customize components based on your need.

🎬 Preview

RadialSlider SpeedoMeter
alt RadialSlider alt SpeedoMeter

Quick Access

Installation | RadialSlider | SpeedoMeter | Properties | Example | License

Installation

1. Install library and react-native-svg
$ npm install react-native-radial-slider react-native-svg
# --- or ---
$ yarn add react-native-radial-slider react-native-svg
2. Install cocoapods in the ios project
cd ios && pod install
Know more about react-native-svg

RadialSlider

  • RadialSlider has two different variants, 'default' and 'radial-circle-slider'
  • RadialSlider can be used to select / set goal, vision, range etc

Default RadialSlider

🎬 Preview


Default RadialSlider

Usage


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

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 Slider

🎬 Preview


Default RadialCircleSlider

Usage


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

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

The speedometer will not take user inputs, when we need to update dynamic values at that time we can use it

  • SpeedoMeter has two different variants, speedometer and speedometer-marker
  • SpeedoMeter can be used to display the speed of an internet, vehicle, fan etc

SpeedoMeter

🎬 Preview


Default SpeedoMeter

Usage


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

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;

SpeedoMeter Marker

🎬 Preview


Default SpeedoMeterMarker

Usage


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

const SpeedoMeterVariant = () => {
  const [speed, setSpeed] = useState(0);

  return (
    <View style={styles.container}>
      <RadialSlider
        variant={'speedometer-marker'}
        value={speed}
        min={0}
        max={200}
        onChange={setSpeed}
      />
    </View>
  );
};

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

export default SpeedoMeterVariant;

Properties

Prop Default Type Description RadialSlider SpeedoMeter
min* 0 number Minimum value βœ… βœ…
max* 100 number Maximum value βœ… βœ…
value* 0 number Show selection upto this value βœ… βœ…
onChange* - function Callback function that invokes on change in track βœ… βœ…
radius 100 number Size of component βœ… βœ…
startAngle 270 number [1-360] The angle at which the circular slider should start from. βœ… ❌
step 1 number Step value for component βœ… ❌
markerValue - number Show marker on specific number βœ… βœ…
title - string Title for component βœ… ❌
subTitle Goal string Subtitle for component βœ… ❌
unit RadialSlider: 'kCal', SpeedoMeter: 'MB/S' string Unit for component βœ… βœ…
thumbRadius 18 number Radius for thumb βœ… ❌
thumbColor #008ABC string Color for thumb βœ… ❌
thumbBorderWidth 5 number Width for thumb βœ… ❌
thumbBorderColor #FFFFFF string Border Color for thumb βœ… ❌
markerLineSize 50 number Size of marker line βœ… βœ…
sliderWidth 18 number Width of slider βœ… βœ…
sliderTrackColor #E5E5E5 string Color of unselected slider track βœ… βœ…
lineColor #E5E5E5 string Color of unselected lines βœ… βœ…
lineSpace 3 number Space between each line βœ… βœ…
linearGradient [ { offset: '0%', color:'#ffaca6' }, { offset: '100%', color: '#EA4800' }] object Gradient color of selected track βœ… βœ…
onComplete - function Callback function which defines what to do after completion βœ… βœ…
centerContentStyle {} object Center content style βœ… ❌
titleStyle {} object Status title container style βœ… ❌
subTitleStyle {} object Status subtitle text style βœ… ❌
valueStyle {} object Center value style βœ… βœ…
buttonContainerStyle {} object Button container style βœ… ❌
leftIconStyle {} object Left Icon style βœ… ❌
rightIconStyle {} object Right Icon style βœ… ❌
contentStyle {} object Whole content style βœ… βœ…
unitStyle {} object Unit text style βœ… βœ…
style {} object Inner container style βœ… βœ…
openingRadian RadialSlider: Math.PI / 3 , SpeedoMeter:0.057 number Radian of component βœ… βœ…
disabled false boolean If true, buttons will be in disabled state βœ… ❌
isHideSlider false boolean If true, slider will be hidden βœ… βœ…
isHideCenterContent false boolean If true, center content will be hidden βœ… βœ…
isHideTitle false boolean If true, title will be hidden βœ… ❌
isHideSubtitle false boolean If true, subtitle will be hidden βœ… ❌
isHideValue false boolean If true, value will be hidden βœ… βœ…
isHideTailText false boolean If true, tail text will be hidden βœ… βœ…
isHideButtons false boolean If true, buttons will be hidden βœ… ❌
isHideLines false boolean If true,slider lines will be hidden βœ… βœ…
isHideMarkerLine false boolean If true, marked lines will be hidden βœ… βœ…
fixedMarker false boolean If true, marked value will be hidden βœ… βœ…
variant default string Different component variants radial-circle-slider, speedometer, speedometer-marker βœ… βœ…
onPress {} function Based on click value will be increased or decreased βœ… ❌
stroke '#008ABC' string Color for button icon βœ… ❌
unitValueContentStyle {} object Unit value content style ❌ βœ…
markerCircleSize 15 number Size for marker circle ❌ βœ…
markerCircleColor #E5E5E5 string Color for marker circle ❌ βœ…
markerPositionY 20 number Marker position for up and down ❌ βœ…
markerPositionX 20 number Marker position for right and left ❌ βœ…
needleBackgroundColor #A020F0 string Background color for needle ❌ βœ…
needleColor #175BAD string Color for needle ❌ βœ…
needleBorderWidth 1.5 number Width of needle border ❌ βœ…
needleHeight 30 number Height of needle ❌ βœ…
markerValueInterval 10 number Show number of value in sequence ❌ βœ…
markerValueColor #333333 string Color for marker value ❌ βœ…
strokeLinecap butt string Line terminations, can be butt, line, or square ❌ βœ…

Example

A full working example project is here Example

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

Find this library useful? ❀️

Support it by joining stargazers for this repository.⭐

🀝 How to Contribute

We'd love to have you improve this library or fix a problem πŸ’ͺ Check out our Contributing Guide for ideas on contributing.

Bugs / Feature requests / Feedbacks

For bugs, feature requests, and discussion please use GitHub Issues

License