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-slider

The 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

License

MIT