3.2.7 • Published 6 months ago

@fseehawer/react-circular-slider v3.2.7

Weekly downloads
439
License
-
Repository
-
Last release
6 months ago

react-circular-slider

Version License: MIT

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.

PropTypeDefaultDescription
widthnumber280Width of the slider in pixels.
direction1 \| -11Rotation direction: 1 for clockwise, -1 for anticlockwise.
minnumber0Minimum value.
maxnumber360Maximum value.
initialValuenumber0Initial value for the label.
data(string \| number)[][]Array of values or labels, evenly spread over 360°.
dataIndexnumber0Initial index position in the data array.
knobColorstring"#4e63ea"Color of the knob.
knobSizenumber32Diameter of the knob in pixels.
hideKnobbooleanfalseIf true, the knob is hidden.
hideKnobRingbooleanfalseIf true, the translucent ring around the knob is hidden.
knobDraggablebooleantrueIf true, the knob is draggable.
knobPositionstring \| number"top"Starting position: accepts "top", "right", "bottom", "left" or an angle (in degrees).
labelstring"ANGLE"Text label displayed on the slider.
labelColorstring"#272b77"Color of the label and value text.
labelBottombooleanfalseIf true, the label is positioned below the slider.
labelFontSizestring"1rem"Font size of the label.
valueFontSizestring"4rem"Font size of the displayed value.
appendToValuestring""Text appended to the value.
prependToValuestring""Text prepended to the value.
renderLabelValueReact.ReactNodenullCustom JSX for rendering the label and value.
verticalOffsetstring"2rem"Vertical offset for the label/value display.
hideLabelValuebooleanfalseIf true, both the label and value are hidden.
progressColorFromstring"#80C3F3"Start color for the progress gradient.
progressColorTostring"#4990E2"End color for the progress gradient.
progressSizenumber8Thickness of the progress track.
progressLineCap"round" \| "butt""round"Cap style for the progress track.
trackColorstring"#DDDEFB"Color of the background track.
trackSizenumber8Thickness of the background track.
trackDraggablebooleanfalseIf 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

2.8.0

7 months ago

3.2.2

7 months ago

3.2.1

7 months ago

3.2.6

6 months ago

3.2.5

7 months ago

3.2.4

7 months ago

3.2.3

7 months ago

2.9.2

7 months ago

2.9.1

7 months ago

2.9.4

7 months ago

2.9.5

7 months ago

3.2.7

6 months ago

3.1.1

7 months ago

3.1.0

7 months ago

3.0.4

7 months ago

3.0.3

7 months ago

3.0.2

7 months ago

3.0.8

7 months ago

3.0.7

7 months ago

3.0.6

7 months ago

3.0.5

7 months ago

3.0.0

7 months ago

2.9.0

7 months ago

2.7.0

1 year ago

2.6.2

2 years ago

2.6.4

2 years ago

2.6.1

2 years ago

2.5.14

3 years ago

2.5.15

3 years ago

2.5.16

3 years ago

2.5.12

3 years ago

2.5.13

3 years ago

2.5.11

3 years ago

2.5.8

3 years ago

2.5.7

3 years ago

2.5.9

3 years ago

2.5.0

4 years ago

2.4.0

4 years ago

2.3.6

4 years ago

2.3.8

4 years ago

2.3.7

4 years ago

2.3.9

4 years ago

2.3.5

5 years ago

2.3.4

5 years ago

2.3.3

5 years ago

2.3.2

5 years ago

2.3.0

5 years ago

2.3.1

5 years ago

2.2.9

5 years ago

2.2.8

5 years ago

2.2.7

5 years ago

2.2.5

5 years ago

2.2.6

5 years ago

2.2.4

6 years ago

2.2.3

6 years ago

2.2.2

6 years ago

2.2.1

6 years ago

2.2.0

6 years ago

2.1.23

6 years ago

2.1.22

6 years ago

2.1.21

6 years ago

2.1.20

6 years ago

2.1.18

6 years ago

2.1.19

6 years ago

2.1.17

6 years ago

2.1.16

6 years ago

2.1.14

6 years ago

2.1.15

6 years ago

2.1.11

6 years ago

2.1.10

6 years ago

2.1.9

6 years ago

2.1.8

6 years ago

2.1.7

6 years ago

2.1.6

6 years ago

2.1.5

6 years ago

2.1.4

6 years ago

2.1.3

6 years ago

2.1.2

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.9

6 years ago

2.0.8

6 years ago

2.0.7

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.5.9

6 years ago

1.5.8

6 years ago

1.5.7

6 years ago

1.5.6

6 years ago

1.5.5

6 years ago

1.5.4

6 years ago

1.5.2

6 years ago

1.5.1

6 years ago

1.5.0

6 years ago

1.4.9

6 years ago

1.4.8

6 years ago

1.4.7

6 years ago

1.4.6

6 years ago

1.4.5

6 years ago

1.4.4

6 years ago

1.4.3

6 years ago

1.4.2

6 years ago

1.4.1

6 years ago

1.4.0

6 years ago

1.3.0

6 years ago

1.2.7

6 years ago

1.2.6

6 years ago

1.2.5

6 years ago

1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.9

6 years ago

1.1.8

6 years ago

1.1.7

6 years ago

1.1.6

6 years ago

1.1.5

6 years ago

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago