@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.

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