πŸš€ Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more β†’
Socket
DemoInstallSign in
Socket

react-native-radial-slider

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-radial-slider

React Native component to select or highlight a specific value from a range of values

1.1.0
latest
Source
npm
Version published
Weekly downloads
464
-32.85%
Maintainers
1
Weekly downloads
Β 
Created
Source

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

RadialSliderSpeedoMeter
alt RadialSlideralt 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

PropDefaultTypeDescriptionRadialSliderSpeedoMeter
min*0numberMinimum valueβœ…βœ…
max*100numberMaximum valueβœ…βœ…
value*0numberShow selection upto this valueβœ…βœ…
onChange*-functionCallback function that invokes on change in trackβœ…βœ…
radius100numberSize of componentβœ…βœ…
startAngle270number [1-360]The angle at which the circular slider should start from.βœ…βŒ
step1numberStep value for componentβœ…βŒ
markerValue-numberShow marker on specific numberβœ…βœ…
title-stringTitle for componentβœ…βŒ
subTitleGoalstringSubtitle for componentβœ…βŒ
unitRadialSlider: 'kCal', SpeedoMeter: 'MB/S'stringUnit for componentβœ…βœ…
thumbRadius18numberRadius for thumbβœ…βŒ
thumbColor#008ABCstringColor for thumbβœ…βŒ
thumbBorderWidth5numberWidth for thumbβœ…βŒ
thumbBorderColor#FFFFFFstringBorder Color for thumbβœ…βŒ
markerLineSize50numberSize of marker lineβœ…βœ…
sliderWidth18numberWidth of sliderβœ…βœ…
sliderTrackColor#E5E5E5stringColor of unselected slider trackβœ…βœ…
lineColor#E5E5E5stringColor of unselected linesβœ…βœ…
lineSpace3numberSpace between each lineβœ…βœ…
linearGradient[ { offset: '0%', color:'#ffaca6' }, { offset: '100%', color: '#EA4800' }]objectGradient color of selected trackβœ…βœ…
onComplete-functionCallback function which defines what to do after completionβœ…βœ…
centerContentStyle{}objectCenter content styleβœ…βŒ
titleStyle{}objectStatus title container styleβœ…βŒ
subTitleStyle{}objectStatus subtitle text styleβœ…βŒ
valueStyle{}objectCenter value styleβœ…βœ…
buttonContainerStyle{}objectButton container styleβœ…βŒ
leftIconStyle{}objectLeft Icon styleβœ…βŒ
rightIconStyle{}objectRight Icon styleβœ…βŒ
contentStyle{}objectWhole content styleβœ…βœ…
unitStyle{}objectUnit text styleβœ…βœ…
style{}objectInner container styleβœ…βœ…
openingRadianRadialSlider: Math.PI / 3 , SpeedoMeter:0.057numberRadian of componentβœ…βœ…
disabledfalsebooleanIf true, buttons will be in disabled stateβœ…βŒ
isHideSliderfalsebooleanIf true, slider will be hiddenβœ…βœ…
isHideCenterContentfalsebooleanIf true, center content will be hiddenβœ…βœ…
isHideTitlefalsebooleanIf true, title will be hiddenβœ…βŒ
isHideSubtitlefalsebooleanIf true, subtitle will be hiddenβœ…βŒ
isHideValuefalsebooleanIf true, value will be hiddenβœ…βœ…
isHideTailTextfalsebooleanIf true, tail text will be hiddenβœ…βœ…
isHideButtonsfalsebooleanIf true, buttons will be hiddenβœ…βŒ
isHideLinesfalsebooleanIf true,slider lines will be hiddenβœ…βœ…
isHideMarkerLinefalsebooleanIf true, marked lines will be hiddenβœ…βœ…
fixedMarkerfalsebooleanIf true, marked value will be hiddenβœ…βœ…
variantdefaultstringDifferent component variants radial-circle-slider, speedometer, speedometer-markerβœ…βœ…
onPress{}functionBased on click value will be increased or decreasedβœ…βŒ
stroke'#008ABC'stringColor for button iconβœ…βŒ
unitValueContentStyle{}objectUnit value content styleβŒβœ…
markerCircleSize15numberSize for marker circleβŒβœ…
markerCircleColor#E5E5E5stringColor for marker circleβŒβœ…
markerPositionY20numberMarker position for up and downβŒβœ…
markerPositionX20numberMarker position for right and leftβŒβœ…
needleBackgroundColor#A020F0stringBackground color for needleβŒβœ…
needleColor#175BADstringColor for needleβŒβœ…
needleBorderWidth1.5numberWidth of needle borderβŒβœ…
needleHeight30numberHeight of needleβŒβœ…
markerValueInterval10numberShow number of value in sequenceβŒβœ…
markerValueColor#333333stringColor for marker valueβŒβœ…
strokeLinecapbuttstringLine 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

Keywords

react

FAQs

Package last updated on 20 Feb 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts