react-circular-slider

A highly customizable circular slider with zero dependencies. Check out the live demos!

An image showing the CircularSlider settings

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

MIT License

Package detail

@fseehawer/react-circular-slider

readme