Package Exports

roundy

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 (roundy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

roundy

Configurable react round slider. Supports touch events.

Installation

npm i roundy (or yarn add roundy)

Usage

You can use Roundy as a single slider:

import Roundy from 'roundy';

const {value} = this.state
<Roundy
   value={value}
   min={10}
   max={30}
   step={5}
   radius={100}
   sliced
   color='pink'
   onChange={value => this.setState({value})}
   onAfterChange={(value, props) => ... }
   overrideStyle={ ... string template as CSS ...}
>

Or use roundy as a group of sliders:

import { RoundyGroup } from 'roundy'

<RoundyGroup sliders={[
    { value: 30, step: 10, id: 'mjaw', max: 50,  radius: 60, color: 'blueviolet', onChange:(val, props) => console.log(props) },
    { value: 30, step: 10, max: 50, radius: 100 },
    { value: 100, step: 20, max: 200, color: 'orange', radius: 140, sliced: false, step: 1 }
]} />

API

Roundy provides the following API:

Prop	Description	Default
value	number: Slider value	50
min	number: Minimal value	0
max	number: Maximum value	100
step	number: Step value to snap value	10
radius	number: Slider radius	100
color	string: Active slider color	'purple'
bgColor	string: Slider arc color	'#ccc'
strokeWidth	number: Slider arc width	15
sliced	boolean: Provide slices based on step value	true
onChange	function: immediate callback function (value, props)	null
onAfterChange	function: callback function after release (value, props)	null
overrideStyle	string: provide additional class style which will be injected into styled-components class	null

Testing

TODO

Contribution

Always happy to take PRs.