Circular Sliders

A Javascript package which allows you to draw concentric responsive circular sliders.

Usage

Create a div where you would like the sliders to go:

<div id="drawing" style="border:1px solid;margin: 20px;height: 300px; width: 600px;"></div>

Add a sliders canvas with id of div and array of options for your sliders:

new CircularSliders.Canvas("drawing", [{type: "Shoe"},{name: "foo-bar"}]);

Options

Slider options:

Name	Type	Default	Description
name	String	Slider n	Name your slider
type	String	Plain	Pick between various types for interesting graphics at the center of the slider: 'Height', 'Weight', 'Shoe', 'Waist', and more to come
centerX	Float	Center of canvas or previous slider	Specify the x value for the center of the slider
centerY	Float	Center of canvas or previous slider	Specify the y value for the center of the slider
color	String	"#0000FF"	Specify the color of the arc fill
minValue	Float	0	The minimum value of your slider
maxValue	Float	100	The maximum value of your slider
value	Float	minValue	Set initial value of slider on page load
step	Float	10	The amount the value is incremented
units	String	""	The units your value is displayed in
priceUnits	String	""	Adds price ('$', '€', '£' ...) before value
radius	Float	Min(canvas.width, canvas.height) / 4 or (previous slider radius + previous slider lineWidth + default slider lineWidth)	The radius of your slider
lineWidth	Float	5	The slider and arc width
strokeColor	String	"#D3D3D3"	The color of the dashes on the slider
ballColor	String	"#000000"	The color of the slider ball
gradientFill	Boolean	true	Specify whether you would like the image in the center (for specified type) of the slider to fill with the slider's color as you scale the slider
legend	Object	{ display: true, font: "12px Arial", color: "#000000" }	Specify whether you would like the slider name, value and units listed in the top left corner of the canvas and the font and color which it's displayed in

Global Options

To set options for all of your sliders, use:

CircularSliders.defaults.color = "#FF7F50";

Installation

Run

npm install circular-sliders

API

Access a canvas with:

var canvas = CircularSliders.canvases["div-id"]

Retrieve the sliders objects with:

canvas.getSliders()

Retrieve an individual slider object with:

var slider = canvas.getSliderByName(name)

Retrieve slider attributes with:

slider.value;

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Bug reports and pull requests are welcome on GitHub at https://github.com/speterlin/circular-sliders.js. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The package is available as open source under the terms of the MIT License.