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:
;
and add it to the imports
array of your module:
@
Components
Precision Slider
Allows you to reduce the range of the slider by dragging vertically.
Example
Responsive Slider
A standard slider that responds to user input.
Example
Slider
Does not respond directly to user input.
Example
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- |