https://github.com/npnm/NpnSlider

A multi range slider component using Angular
https://github.com/npnm/NpnSlider

angular angular-component component multi-range-slider npn-slider slider-component

Last synced: about 2 months ago
JSON representation

A multi range slider component using Angular

• Host: GitHub
• URL: https://github.com/npnm/NpnSlider
• Owner: npnm
• License: mit
• Created: 2018-06-30T09:32:05.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-02T01:43:46.000Z (over 1 year ago)
• Last Synced: 2024-07-10T13:17:24.838Z (2 months ago)
• Topics: angular, angular-component, component, multi-range-slider, npn-slider, slider-component
• Language: TypeScript
• Homepage: https://npnm.github.io/NpnSlider
• Size: 3.15 MB
• Stars: 14
• Watchers: 5
• Forks: 11
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [NpnSlider](https://npnm.github.io/NpnSlider/) (A Multi Range Slider Component)

[![NPM Version](https://img.shields.io/npm/v/npn-slider)](https://www.npmjs.com/package/npn-slider)

[![License](https://img.shields.io/github/license/npnm/npnslider)](LICENSE)

[![Build Status](https://travis-ci.org/npnm/NpnSlider.svg?branch=master)](https://travis-ci.org/npnm/NpnSlider)

NpnSlider is a reusable range slider component using Angular v6.0. It can be used either as a multi range or a single range slider. By default, it is a multi range slider.

## Installation

### [NPM](https://www.npmjs.com/package/npn-slider)

```sh

npm install --save npn-slider

```

### [Yarn](https://yarnpkg.com/en/package/npn-slider)

```sh

yarn add npn-slider

```

## Usage

### Html

```html

```

### Attributes

Attributes | Description

-----------|------------

@Input() 
 **min**: number | The minimum value of slider

@Input() 
 **max**: number | The maximum value of slider

@Input() 
 **step**: number | The value at which slider value should change

@Input() 
 **showStepIndicator**: boolean | Whether the step indicator should display or not

@Input() 
 **minSelected**: number | The selected value for slider's left handler

@Input() 
 **maxSelected**: number | The selected value for slider's right handler

@Input() 
 **disabled**: string | To disable the slider. Valid values: _'true'_ or _'disabled'_ or _empty attribute_

@Input() 
 **multiRange**: boolean | To switch between Mutli range and Single range mode. Slider is multi range by default

@Input() 
 **hide-tooltip**: boolean | To hide the tooltip that shows on hover of slider handler. Default value: _'false'_

@Input() 
 **hide-values**: boolean | To hide values displayed at bottom of slider. Default value: _'false'_

@Output() 
 **onChange**: EventEmitter() | The event will be fired on change of selected range of values.
_Returns: Selected range of values as an array[],_ 
_On Single range mode, a number array with single value will be returned_

### Example and Sample Code

a) **Import _'NpnSliderModule'_ in your app module**

```ts

import { NpnSliderModule } from "npn-slider";

  

@NgModule({

  imports:[

    ..

    NpnSliderModule

    ..

  ]

})

``` 

b) **Add _'npn-slider'_ in your component html**

```html

```

c) **Add a method in your component class to listen for onChange event from slider** 

```ts

/*Method to listen for onChange event from slider*/

onSliderChange(selectedValues: number[]) {

    this._currentValues = selectedValues;

}

```

d) **You done. Run your app. cheers!**