@jsdev63/advanced_react-circular-slider

2.4.5 • Public • Published

advanced-react-circular-slider

A highly customizable circular slider with no dependencies. See some live demos here!

CircularSlider example image

CircularSlider example image

install

npm install @jsdev63/advanced_react-circular-slider

example

import React from 'react';
import CircularSlider from '@jsdev63/advanced_react-circular-slider';

const App = () => {
    return (
        <CircularSlider
            onChange={ value => { console.log(value); } }
        />
    )
};

export default App;

Use min and max props to define the range of numbers. Use prependToValue/appendToValue if you want to prepend/append e.g. "$" or "°" to the value. Or simply use the data prop and pass any number or string sequence as an array to be spread in 360°. See some live demos here!

import React from 'react';
import CircularSlider from '@jsdev63/advanced_react-circular-slider';

const App = () => {
    return (
<CircularSlider
width={400}
limit={270}
offsetAngle={-45}
labelOffset={20}
direction={1}
data={[
  {
    key: 1,
    value: "STAFFING",
  },
  {
    key: 2,
    value: "TEAM",
  },
  {
    key: 1,
    value: "PROJECT",
  },
  {
    key: 1,
    value: "MANAGED",
  }
]}
knobPosition="bottom"
valueFontSize="2rem"
renderLabelValue={null}
progressLineCap="flat"
progressSize={16}
progressColorFrom={'#5215FC'}
progressColorTo={'#280885'}
doubleLineType="progress"
trackColor="#a9a9a9"
trackSize={16}
knobColor = "blue"
knobSize= {40}
knobEl={<SlideIcon width={40} height={40} />}
>
</CircularSlider>
    )
};

export default App;

Props

prop type default Affects
width number 280 width of the slider
direction number 1 clockwise (1) or anticlockwise (-1)
min number 0 smallest value
max number 360 largest value
limit number 360 maximum angle
offsetAngle number -45 offset angle
data array [] array of data to be spread in 360°
dataIndex number 0 initially place knob at a certain value in the array
knobEl string null knob element
knobColor string #4e63ea knob color
knobSize number 32 knob size, should be large than track size
hideKnob boolean false hide knob
knobDraggable boolean true knob not draggable
knobPosition string top knob's 0 position to be top, right, bottom or left
label string ANGLE label
labelColor string #272b77 label and value color
labelOffset number 20 spacing between label and circle
activedlabelColor string #c54a1b actived label and value color
labelBottom boolean false label position at bottom
labelFontSize string 1rem label font-size
valueFontSize string 4rem label value font-size
appendToValue string '' append character to value
prependToValue string '' prepend character to value
renderLabelValue jsx null add custom jsx code for the labels and styles
verticalOffset string 2rem vertical offset of the label and value
hideLabelValue boolean false hide label and value
progressColorFrom string #80C3F3 progress track gradient start color
progressColorTo string #4990E2 progress track gradient end color
progressSize number 8 progress track size
progressLineCap string round progress track cap to be round or flat
trackColor string #DDDEFB background track color
trackSize number 8 background track size
doubleLineType string progress type of double line progress or track
doubleLineColor string gradiant double line color mode gradiant or null or color string
onChange func value => {} returns label value

license

MIT License

Package Sidebar

Install

npm i @jsdev63/advanced_react-circular-slider

Weekly Downloads

4

Version

2.4.5

License

MIT

Unpacked Size

448 kB

Total Files

39

Last publish

Collaborators

  • jsdev63