Package Exports

@fseehawer/react-circular-slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fseehawer/react-circular-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-circular-slider

A highly customizable circular slider with no dependencies. See the 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 appendToValue if you want to append e.g. "°" to the value. Or use the data prop to pass any number or string sequence as an array to be spread in 360°. See the 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€"]} //...
            initialDataIndex={10}
            onChange={ value => { console.log(value); } }
        />
    )
};

export default App;

Props

prop	type	default	Affects
width	number	280	width of slider
direction	number	1	direction of slider to be clockwise (1) or anticlockwise (-1)
min	number	0	smallest value
max	number	360	largest value
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
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
labelFontSize	string	1rem	label font-size
valueFontSize	string	4rem	label value font-size
appendToValue	string	''	symbol or character to append to value
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	6	progress track size
progressLineCap	string	round	progress track cap to be round or flat
trackColor	string	#DDDEFB	background track color
trackSize	number	6	background track size
onChange	func	value => {}	returns label value

license

MIT License