react-circular-slider

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

install

npm install @fseehawer/react-circular-slider

example

import React from 'react';
import CircularSlider from '@fseehawer/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 '@fseehawer/react-circular-slider';

const App = () => {
    return (
        <CircularSlider
            label="savings"
            labelColor="#005a58"
            knobColor="#005a58"
            progressColorFrom="#00bfbd"
            progressColorTo="#009c9a"
            progressSize={24}
            trackColor="#eeeeee"
            trackSize={24}
            data={["1€","2€"]} //...
            dataIndex={10}
            onChange={ value => { console.log(value); } }
        />
    )
};

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
initialValue	number	0	set an initial value for the label
data	array	[]	array of data to be spread in 360°
dataIndex	number	0	initially place knob at a certain value in the array
knobColor	string	#4e63ea	knob color
knobSize	number	32	knob size
hideKnob	boolean	false	hide knob
hideKnobRing	boolean	false	hide the slightly transparent ring around knob
knobDraggable	boolean	true	knob draggable
knobPosition	string or number	top	knob's 0 position as an angle or top, right, bottom, left
label	string	ANGLE	label
labelColor	string	#272b77	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
useMouseAdditionalToTouch	boolean	false	allow touch and mouse events
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
trackDraggable	boolean	false	make the track draggable
onChange	func	value => {}	returns label value
isDragging	func	value => {}	returns isDragging value
continuous	object	...	apply settings to enable continuous mode
continuous.enabled	boolean	false	whether continuous mode is enabled
continuous.clicks	number	120	the amount of clicks per loop cycle
continuous.interval	number	1	the amount to increment/decrement with each click

Please consider a small donation. Even one dollar will help to maintain and develop new features. Thanks!

You can find the donate button on the bottom of the example page

license

MIT License