angular-precision-sliders

An Angular component library featuring several sliders including a precision slider that offers increased accuracy over a standard slider when the data range is large.

Demo

To see these components in action go to https://paultfreedman.github.io/angular-precision-sliders/

Installation

Run the following command from your project directory:

npm install angular-precision-sliders

Then import the SlidersModule:

import { SlidersModule } from 'angular-precision-sliders';

and add it to the imports array of your module:

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

Components

Precision Slider

Allows you to reduce the range of the slider by dragging vertically.

Example

<aps-precision-slider class="slider precision-slider" [minValue]="0" [maxValue]="2500" [initialValue]="0" [handleWidth]="30" [trackHeight]="12" [focusOffsetThreshold]="36" [focusRate]="10" [focusMinRange]="0.05"
        (valueChanged)="onPrecisionValueChange($event)" [selectableColour]="'orange'" [nonSelectableColour]="'gainsboro'" [handleFill]="'black'"></aps-precision-slider>

Responsive Slider

A standard slider that responds to user input.

Example

<aps-responsive-slider class="slider basic-slider" [minValue]="0" [maxValue]="2500" [initialValue]="0" [handleWidth]="30" [trackHeight]="12" [bottomColour]="'green'"
        [middleColour]="'green'" [topColour]="'green'" (valueChanged)="onBasicValueChange($event)"></aps-responsive-slider>

Slider

Does not respond directly to user input.

Example

<aps-slider class="slider" [minValue]="0" [maxValue]="2500" [initialValue]="0" [value]="dummySliderVal" [handleWidth]="30" [trackHeight]="12" [bottomColour]="'red'"
        [middleColour]="'red'" [topColour]="'red'"></aps-slider>

Properties

| Name | Description | (P)recisionSlider, (R)esponsiveSlider, (S)lider | | ---- | ----------- | ----------------------------------------------- | | minValue | Minimum value for slider | PRS | | maxValue | Maximum value or slider | PRS | | initialValue | Value when slider first loaded | PRS | | value | Current slider value (bind to it to update value without user input) | PRS | | handleWidth | Size in pixels of the slider handle | PRS | | trackHeight | Height in pixels of the slider track | PRS | | handleFill | Colour of the handle | PRS | | bottomColour | Colour of the leftmost portion of the slider track | -RS | | middleColour | Colour of the middle portion of the slider track | -RS | | topColour | Colour of the rightmost portion of the slider track | -RS | | selectableColour | Colour of the selectable portion of the base slider track | P-- | | nonSelectableColour | Colour of the non-selectable portion of the base slider track | P-- | | focusOffsetThreshold | Pixel offset before the focus slider becomes visible | P-- | | focusRate | Multiplication factor to adjust sensitivity of precision slider | P-- | | focusMinRange | Minimum proportion of the full range (0.0 - 1.0) | P-- |

Events

| Name | Description | (P)recisionSlider, (R)esponsiveSlider, (S)lider | | ---- | ----------- | ----------------------------------------------- | | valueChanged | Emitted when slider's value has been updated | PR- |