FAST circular slider
Introduction
Circular slider with start and end handle designed for the FAST project.
Installation
You can install fast-circular-slider via Yarn or npm:
# If using Yarn:
yarn add fast-circular-slider
# If using npm:
npm install --save fast-circular-sliderThe core component from fast-circular-slider is CircularSlider.
This module can be required via ES imports or CommonJS require.
import CircularSlider from 'fast-circular-slider';
// using require
const CircularSlider = require('fast-circular-slider');Usage
import React, { useState } from 'react'
import { render } from 'react-dom'
import CircularSlider from 'fast-circular-slider'
const [value, setValue] = useState<[number, number]>([320, 40])
const handleChange = (value : [number, number]) => {
setValue(value)
}
render(
<CircularSlider
value={value}
onChange={handleChange}
/>, document.getElementById('root'))PROPS & METHODS
| Prop name | Type | Default | Description |
|---|---|---|---|
| value | [number, number] | [320, 40] | The value of the slider |
| onChange | (value) => void | null | Callback function that is fired when the user changes the slider's value |
| disabled | boolean | false | If true, the slider will not be interactable |
| circleRadius | number | 67 | Radius of the circle |
| circleWidth | number | 4 | Stroke width of the circle |
| circleColor | string | '#dedede' | Color of the circle |
| handleRadius | number | 6 | Radius of the handle |
| handleWidth | number | 2 | Stroke width of the handle |
| arcWidth | number | 4 | Stroke width of the arc |
| sliderColor | string | #91d5ff | Color of the slider when enabled |
| disabledColor | string | #b8b8b8 | Color of the slider when disabled |
| hoverColor | string | #69c0ff | Color of the slider on hover |
| focusColor | string | #69c0ff | Color when the degree input field is in focus |
| ship | boolean | false | If true, ship outline will be shown |