AngSlider

Slider built with Angular 10. Version 1.0.0 - with Angular 9.

Examples

https://stackblitz.com/edit/angular-vdwzit

Installation and use

To install package run npm i ang-slider.

Example of usage:

import { AngSliderComponent } from 'ang-slider';

@NgModule({
  imports:      [],
  declarations: [ AppComponent, AngSliderComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

<ang-slider
  [(value)]="value"
  [config]="config"
  [getTooltipLabel]="getTooltipLabel"
  [disabled]="disabled"
></ang-slider>

Parameters and events

Input parameters

Parameters	Value type	Example	Description
config	object		object with configurations for slider
degree	number		degree on which slider must be rotated (from -90 to 90)
disabled	boolean		whether to disable slider
getTooltipLabel	function		function which gets value from slider as input and returns string which will be used as tooltip label
tickLabels	string[]		tick labels
value	number		value on slider

config interface:

interface Config {
  min?: number;
  max?: number;
  height?: number;
  width?: number;
  fillColor?: string;
  backgroundColor?: string;
  thumbWidth?: number;
  thumbHeight?: number;
  thumbType?: ThumbTypes;
  tooltipType?: TooltipTypes;
  enableTooltip?: boolean;
  enableTicks?: boolean;
  enableTickLabels?: boolean;
  tickNumber?: number;
  showTooltipOnSlide?: boolean;
  showBorderValues?: boolean;
  disabled?: boolean;
  ariaLabel?: string;
}

Default config:

{
  min: 0,
  max: 100,
  fillColor: 'rgb(2, 0, 97)',
  backgroundColor: 'rgb(181, 176, 255)',
  enableTooltip: true,
  tooltipType: TooltipTypes.Rect,
  thumbType: ThumbTypes.Rect,
}

Output events

change - is emitted on mouseup.

slide - is emitted on mousemove.

valueChange - is emitted in both cases.

You can use two-way data binding for value: [(value)]="someValue".

Setting styles

Styles can be set in config or using css classes (example below). Parameters in config are more important than css styles.

Example of setting colors of the fill and the thumb (but to apply this styles you need fillColor and backgroundColor in config to be empty rows):

ang-slider::ng-deep {
  .thumb {
    background-color: blue;
  }
  .slider-fill {
    background-color: blue;
  }
}

Available classes: slider, thumb, tootlip, tooltip-text, slider-fill, ticks-container, tick, labels-container, tick-label, disabled.

Notes

For custom thumb use styles and thumbType: 'custom'.

In case of angles 90 or -90 height of the slider is determined by width property .