advanced-react-circular-slider

This is a fork of the original react-circular-slider. A highly customizable circular slider with no dependencies. See some live demos here!

install

npm install advanced-react-circular-slider

example

import React from 'react';
import CircularSlider from 'advanced-react-circular-slider';
import 'advanced-react-circular-slider/main.css';

const App = () => {
    return (
      <CircularSlider
        labelTop="Spoons"
        labelBottom="TBSP"
        width={300}
        min={0}
        max={4}
        step={0.1}
        labelStep={0.5}
        onChange={console.log}
      ></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 step | number | 0.1 | step count labelStep | number | 1 | step count of the labels limit | number | 360 | maximum angle offsetAngle | number | 0 | 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 | #0076BA | knob color knobSize | number | 60 | 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 labelTop | string | Demo | label on the top labelBottom | string | '' | label on the bootom labelColor | string | #2597D7 | label and value color secondaryLabelColor | string | #c0c0c0 | secondary label and value color labelOffset | number | 20 | spacing between label and circle roundLabelFontSize | number | 1.2rem | font size of the label on the circle roundLabelColor | string | #272b77 | color of the label on the circle activedlabelColor | string | #0076ba | actived label and value color labelFontSize | string | 1.5rem | 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 | #54BFFD | progress track gradient start color progressColorTo | string | #0378BC | progress track gradient end color progressSize | number | 16 | progress track size progressLineCap | string | round | progress track cap to be round or flat trackColor | string | #CFE0F4 | background track color trackSize | number | 20 | background track size doubleLineType | string | progress | type of double line progress or track doubleLineColor | string | null | double line color mode gradiant or null or color string onChange | func | value => {} | returns label value magentTolerance | number | 10 | stength of the slider magnet to the marks

license

MIT License