Ang-slider NPM

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	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.