circle-slider
A slider, except it's round. Pretty good for selecting angles and stuff.
Install
$ npm i circle-slider
Usage
Basic usage:
HTML:
JS:
// Import the module at the top of your fileconst CircleSlider = ;// or ES6 style;// The id of your target element as the first argconst cs = "whatever";
All you have to do on the HTML side is to create a div with some id, which is the first parameter in the constructor of CircleSlider.
All you need is to create a div, the elements for the handle (and its container) will be created for you.
You can put anything you want inside the div, e.g. a div which displays the current angle (see the demo).
Options
The constructor takes an optional second parameter which looks like this:
// e.g. snap to every 45 degreessnap: Number// positive directionclockwise: Boolean// which position 0 degrees isstartPos: "top"|"bottom"|"left"|"right"
I'll emphasize that startPos
changes where 0 degrees is, so if you instead want, for example, 0 to be at the top, but want the slider to start at 90 degrees, you should call setAngle(90)
(see below) after creating the slider.
Example usage:
const options =snap: 45clockwise: falsestartPos: "top";const cs = "id" options;
You can also write the first parameter with a #:
"#id";
With or without #, there is no difference in functionality, so choose which one you prefer.
Methods
Here is the stuff you can do with CircleSlider:
// get the current angle valuecs;// set the angle manuallycs;// fires every time the slider is moved// the emitted event will give you the anglecs// fires every time the handle stops moving// can be useful to avoid heavy operations every time the// handle movescs
Note that the sliderMove
event gets triggered when using setAngle
.
Since CircleSlider
extends eventemitter3
, you can also use functions like once
instead of on
.
Further reading here (eventemitter3
uses the same API as node events
).
Styling
I leave most styling up to you! However, there are some CSS rules that you must use in order for the handle two rotate properly and stuff. Here are some good defaults to get started with:
/*Probably best to paste this exactly as is.These CSS rules make sure that the handle rotatesproperly, so don't change anything here.*//* Also paste as is *//* the appearance of the handle, feel free to change! */