@fseehawer/react-circular-slider v3.2.7
react-circular-slider
A highly customizable circular slider with zero dependencies. Check out the live demos!
TypeScript Support
This component now has full TypeScript support! Enjoy full IntelliSense and strong type-checking out of the box.
JavaScript users: No worries – the published output is plain JavaScript and works exactly as before.
Installation
npm install @fseehawer/react-circular-slider
example
import React from 'react';
import CircularSlider from '@fseehawer/react-circular-slider';
const App: React.FC = () => (
<>
<CircularSlider onChange={value => console.log(value)} />
</>
);
export default App;
Custom Configuration
Customize properties such as the label, colors, data set, and more:
import React from 'react';
import CircularSlider from '@fseehawer/react-circular-slider';
const App: React.FC = () => (
<>
<CircularSlider
label="savings"
labelColor="#005a58"
knobColor="#005a58"
progressColorFrom="#00bfbd"
progressColorTo="#009c9a"
progressSize={24}
trackColor="#eeeeee"
trackSize={24}
data={['1€', '2€']} // Custom data array
dataIndex={10}
onChange={value => console.log(value)}
/>
</>
);
export default App;
Props
The table below lists all available props along with their TypeScript types, default values, and descriptions.
Prop | Type | Default | Description |
---|---|---|---|
width | number | 280 | Width of the slider in pixels. |
direction | 1 \| -1 | 1 | Rotation direction: 1 for clockwise, -1 for anticlockwise. |
min | number | 0 | Minimum value. |
max | number | 360 | Maximum value. |
initialValue | number | 0 | Initial value for the label. |
data | (string \| number)[] | [] | Array of values or labels, evenly spread over 360°. |
dataIndex | number | 0 | Initial index position in the data array. |
knobColor | string | "#4e63ea" | Color of the knob. |
knobSize | number | 32 | Diameter of the knob in pixels. |
hideKnob | boolean | false | If true , the knob is hidden. |
hideKnobRing | boolean | false | If true , the translucent ring around the knob is hidden. |
knobDraggable | boolean | true | If true , the knob is draggable. |
knobPosition | string \| number | "top" | Starting position: accepts "top" , "right" , "bottom" , "left" or an angle (in degrees). |
label | string | "ANGLE" | Text label displayed on the slider. |
labelColor | string | "#272b77" | Color of the label and value text. |
labelBottom | boolean | false | If true , the label is positioned below the slider. |
labelFontSize | string | "1rem" | Font size of the label. |
valueFontSize | string | "4rem" | Font size of the displayed value. |
appendToValue | string | "" | Text appended to the value. |
prependToValue | string | "" | Text prepended to the value. |
renderLabelValue | React.ReactNode | null | Custom JSX for rendering the label and value. |
verticalOffset | string | "2rem" | Vertical offset for the label/value display. |
hideLabelValue | boolean | false | If true , both the label and value are hidden. |
progressColorFrom | string | "#80C3F3" | Start color for the progress gradient. |
progressColorTo | string | "#4990E2" | End color for the progress gradient. |
progressSize | number | 8 | Thickness of the progress track. |
progressLineCap | "round" \| "butt" | "round" | Cap style for the progress track. |
trackColor | string | "#DDDEFB" | Color of the background track. |
trackSize | number | 8 | Thickness of the background track. |
trackDraggable | boolean | false | If true , allows dragging the background track. |
onChange | (value: string \| number) => void | () => {} | Callback fired when the value changes. |
isDragging | (dragging: boolean) => void | () => {} | Callback to signal whether the slider is being dragged. |
Donation
If you find this component useful, please consider a small donation. Even one dollar helps maintain and develop new features!
You can find the donate button on the bottom of the example page
license
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
1 year ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago