Package Exports

react-web-circular-slider
react-web-circular-slider/src/CircularSlider.js

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 (react-web-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-web-circular-slider

ReactJS component for creating circular slider. This is a rework of the original React-Native project to support ReactJS.

Example app – inspired by Apple's Bedtime ⏰

(It's just an example what you can achieve – with this package you can create any circular slider)

Installation

Install library
```
npm i --save react-web-circular-slider
```

Usage

Import Circular Slider

import { CircularSlider } from 'react-web-circular-slider';

Use as follows:

<CircularSlider
  startAngle={startAngle}
  angleLength={angleLength}
  onUpdate={({ startAngle, angleLength }) => this.setState({ startAngle, angleLength })}
  segments={5}
  strokeWidth={40}
  radius={145}
  gradientColorFrom="#ff9800"
  gradientColorTo="#ffcf00"
  showClockFace=True,
  clockFaceColor="#9d9d9d"
  bgCircleColor="#171717"
  stopIcon={<G><Path .../></G>}
  startIcon={<G><Path .../></G>}
/>

Configuration

You can configure the slider by passing of the following props:

startAngle – angle where the slider starts (from 0 to 2π)
angleLength - length of the slider (from 0 to 2π) where data is an object of new values of startAngle and angleLength.
segments (optional) - SVG doesn't support canonical gradients, so it's imitated by using multiple linear gradients across the slider. In most cases 5 should be fine.
strokeWidth (optional) - width of slider
radius (optional) - size of the slider
gradientColorFrom (optional) - initial gradient color
gradientColorTo (optional) - final gradient color
showClockFace (optional) - if component should render clock face
bgCircleColor (optional) - color of the circle under the slider (pathway for a slider)
stopIcon (optional) - SVG Path for a stop icon (see the example)
startIcon (optional) - SVG Path for a start icon (see the example)

Change events

onUpdate({ startAngle, angleLength, startTime, endTime, durationMinutes }) - when either start or end slider is moved. onUpdate(data) is triggered, where data is an object of new values of startAngle, angleLength, startTime({h, m}), endTime({h, m}) and duration [int] value expressed in total minutes.
onStartUpdate({ startAngle, startTime, durationMinutes }) - when the start slider is moved. onStartUpdate(data) is triggered, where data is an object of new values of startAngle, startTime({h, m}) and duration [int] value expressed in total minutes.
onEndUpdate({ angleLength, endTime, durationMinutes }) - when the end slider is moved. onEndUpdate(data) is triggered, where data is an object of new values of angleLength, endTime({h, m}) and duration [int] value expressed in total minutes.

Working example app

Author

Updated by Quentin Barnard. Original code by Bartosz Gryszko (b@gryszko.com)

License

MIT