circular-slider

Following is the brief documentation of the circular-slider component. The component itself is represented only by the circular slider. The values itself are generated by the response from the component actions.

Example image:

Instructions

Insert a <canvas> element with an id attribute. Include the script file app.js. The component slider will be drawn in the canvas element. The component can contain multiple sliders, but is restricted with the size of the component itself. The maximum radius of the slider must not exceed 90% of the width/height, also the minimun cannot be less than 150px.

To instantiate a slider instance use:

const component = new CircularSlider(canvas-element-id, array-of-slider-items, component-options);

Parameter	Type	Description
canvas-element-id	string	The canvas element id
array-of-slider-items	array	Array of slider items
component-options	object	An optional object, representing slider options

Example of initialization

const component = new CircularSlider('canvas', [new CircularSliderOptions('Health care', '#ff4043', 0, 1000, 10)]);

Slider items

The component can contain one or more slider items. Each slider item is defined by:

• name
• color
• minValue
• maxValue
• step
• radius (optional)

Out of these, only radius is optional. When not provided, it is automatically calculated based on the available space.

Component options

Component options are an optional parameter definining common component options. The default values are:

{
    baseSlider: {
        gap: 1, // UI gap between steps
        color: '#bfc1c2', // base slider color
        sliderColorAlpha: 0.7, // slider color opacity
        thickness: 40, // slider thickness
        margin: 10 // margin between individual sliders
    },
    sliderButton: {
      radius: (baseSlider.thickness / 2) + 5, // Slider button radius
      fill: '#fff', // slider button fill
      stroke: '#bfc1c2', // slider button stroke
      strokeWidth: 2 // slider button stroke width
    },
    decimals = 0 // the precision of the slider values
}

Each of these parameters can be redefined by providing a different value. Other options will remain.

Example - Change slider button color:

const component = new CircularSlider('canvas',
    [
        new CircularSliderOptions('Health care', '#ff4043', 0, 1000, 10)
    ],
    { 
    sliderButton: {
        fill: '#000'
    }
});

Actions

Component defines two actions:

• onInit
• onChange

These actions are used to display values outside of the component.

These are described as:

Action	Payload	Description
onInit	Array of SliderResult objects	The initial slider results with default values
onChange	Array of SliderResult objects	The current slider results

The SliderResult class has three properties:

• name
• color
• value

The detail usage example can be seen in the code!