ng-round-slider

Angular library with implementation of Round Slider JQuery Plugin using JQuery and round-slider packages.

Motivation

Sometime ago I needed a round slider as a map control. I didn't find a suitable for me vanilla (html, css, js) solution (but I googled about 2 hours). Only option was as mentioned earlier JQuery Plugin. I integrated it to my Angular application. I dreamed it would be a separate library I could reuse...

Usage

1. Install library:

npm i ng-round-slider

2. Import the component:

// ...
import { NgRoundSliderComponent } from 'ng-round-slider';

@Component({
  // ...
  imports: [NgRoundSliderComponent]
})
export class SomeComponent {
  // ...
}

3. Add in template:

<ng-round-slider></ng-round-slider>

Input properties

[!IMPORTANT]
All input properties are optional. If you didn't provide a value, it would set default value.

| Name | Type | Description | Default | |:-----------------:|:----------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:-------:| | animation | boolean | Enables or disables the handle movement animation.As the control uses the CSS3 animation, so you can use any CSS3 transition effects to customize the animation type and speed. To know how to use custom animation check here. | true | | width | number | Indicates the width (or thickness) of the slider. | 18 | | circleShape | string | Indicates the circle shape to be render. The available circle shapes are:fullhalf-tophalf-bottomhalf-lefthalf-rightquarter-top-leftquarter-top-rightquarter-bottom-rightquarter-bottom-leftpiecustom-halfcustom-quarter | full | | disabled | boolean | Sets the disable state or enable state of the control. While the control in the disable state we can't interact with this.And in disable mode the control looks like in the blured state. | false | | editableTooltip | boolean | Enables the editable option of tooltip. When this property set as true, we can change the value by editing the tooltip. | true | | endAngle | string | number | Indicates the end point of the slider.Multiple format supported:180 : Sets the fixed value, where the endAngle is 180°."+180" : This is dependent to startAngle property. If the startAngle is 90° then the endAngle considered as 270°."-90" : This is also dependent to startAngle property. If the startAngle is 180° then the endAngle considered as 90°.The endAngle property is applicable for "full" circle shape only. | +360 | | handleSize | string | number | The handleSize property mentions the size of the handle.Multiple format supported:22 : Sets the fixed size, where the handle's height and width considered as 22."30,10" : Sets the fixed size, where the handle's height considered as 30 and width considered as 10."+4" : This is dependent to width property. If the width is 20 then the handleSize considered as 24."-4" : This is also dependent to width property. If the width is 20 then the handleSize considered as 16. | +0 | | handleShape | string | The handleShape property mentions the shape of the handle. Currently the following types are available:rounddotsquareIn addition you can make your own handle shape by customizing this. Please check here for handle customization. | round | | keyboardAction | boolean | Enables or disables the keyboard functionality.The slider value can be changed through the keyboard by using the arrow keys (Up, Down, Left, Right) and Home, Down keys. | truу | | lineCap | string | The lineCap property mentions the shape at the end part of the path. This is not applicable for the "full" circle shape, except this all other circle shapes supports lineCap.The possible inputs for this property is:squareround | butt | | max | number | The max property indicates the maximum value of the slider. | 100 | | min | number | The min property indicates the minimum value of the slider. | 0 | | mouseScrollAction | boolean | Enables or disables the mouse scroll functionality.The slider value can be changed through the mouse scrolling. | false | | radius | number | The radius property indicates the radius of the slider's circle.Note : The height and width of the control considered as (2 * radius). | 85 | | readOnly | boolean | This enables the control into the readOnly mode, so we can can't interact with the control when readOnly enabled. | false | | showTooltip | boolean | Enables or disables the tooltip inside the slider. | true | | sliderType | string | Indicates the slider type to be render. The available slider types are:defaultmin-rangerange | default | | startAngle | number | Indicates the starting point of the slider.The startAngle property is applicable for "full", "custom-half", "custom-quarter" and "pie" circle shapes only. | 0 | | startValue | number | This property decides at which point the slider should start. Otherwise, by default the slider starts with min value.This is mainly used for min-range slider, where you can customize the min-range start position. | null | | step | number | Decides the number of steps or value should take while we move the handle. | 1 | | value | string | number | Sets or gets the value of the slider.For default and min-range slider the property allows a single value (ex: value - 10).For range slider the property allows two values separated by comma (ex: value - "30,60"). | null | | svgMode | boolean | This will enables the slider into the SVG mode.Through SVG mode you can do a lot of customization, and it will resolve all the legacy issues.Note : It is recommended to use the SVG mode for better usability and customization. | false | | borderWidth | number | Indicates the border width of the slider.Note : This is only applicable for SVG mode | 1 | | borderColor | string | Sets the border color of the slider.