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. You can check out some examples 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;

The CircularSlider component with some custom props. See the examples 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€"]} //...
            placeKnobAtIndex={10}
            onChange={ value => { console.log(value); } }
        />
    )
};

export default App;

Props

prop	type	default	Affects
width	number	280	width of slider
knobColor	string	#4e63ea	knob color
label	string	DEGREES	label
labelColor	string	#272b77	label color
progressColorFrom	string	#80C3F3	progress track gradient start color
progressColorTo	string	#4990E2	progress track gradient end color
progressSize	number	6	progress track size
trackColor	string	#DDDEFB	background track color
trackSize	number	6	background track size
data	array	[]	array of data to be spread
placeKnobAtIndex	int	0	place knob at a certain array index
onChange	func	value => {}	returns label value

license

MIT License