Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tb/ng2-nouislider

Angular2 noUiSlider directive
https://github.com/tb/ng2-nouislider

angular angular2 ng2 nouislider

Last synced: 5 days ago
JSON representation

Angular2 noUiSlider directive

Host: GitHub
URL: https://github.com/tb/ng2-nouislider
Owner: tb
License: mit
Created: 2016-04-24T06:17:09.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2023-07-20T17:43:43.000Z (over 1 year ago)
Last Synced: 2024-10-29T22:29:39.294Z (about 2 months ago)
Topics: angular, angular2, ng2, nouislider
Language: TypeScript
Homepage: http://tb.github.io/ng2-nouislider/
Size: 9.3 MB
Stars: 184
Watchers: 9
Forks: 114
Open Issues: 72
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-angular-components - ng2-nouislider demos - Angular2 noUiSlider directive (Uncategorized / Uncategorized)

README

        # ng2-nouislider

[![CI](https://github.com/tb/ng2-nouislider/actions/workflows/ci.yml/badge.svg?event=push)](https://github.com/tb/ng2-nouislider/actions/workflows/ci.yml)

[![npm version](https://badge.fury.io/js/ng2-nouislider.svg)](https://badge.fury.io/js/ng2-nouislider)

[![Downloads](https://img.shields.io/npm/dm/ng2-nouislider.svg)](https://npmjs.org/package/ng2-nouislider)

[![All Contributors](https://img.shields.io/badge/all_contributors-18-orange.svg?style=flat-square)](#contributors)

Angular2 nouislider component

See [demos](https://tb.github.io/ng2-nouislider/)

## Install

> Requires Angular 14 or higher

    npm i nouislider ng2-nouislider

## Import

    import { NouisliderModule } from 'ng2-nouislider';

### Styles

    @import "nouislider/dist/nouislider.css";

## Usage

### Using ngModel

    

### Within reactive forms

```js

this.form1 = this.formBuilder.group({ single: [10] });

```

```html

  

```

## Nouislider documentation

This component is based on [nouislider](https://refreshless.com/nouislider/). Documentation about additional settings (passed in [config] @Input) can be found [here](https://refreshless.com/nouislider/slider-options/).

## Start development

    corepack enable

    pnpm i

    pnpm start

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

|   [
_{Tomasz Bak}](http://twitter.com/tomaszbak)
[💻](https://github.com/tb/ng2-nouislider/commits?author=tb 'Code') [👀](#review-tb 'Reviewed Pull Requests')    | [
_{Giacomo Mazzamuto}](https://github.com/gmazzamuto)
[💻](https://github.com/tb/ng2-nouislider/commits?author=gmazzamuto 'Code') [👀](#review-gmazzamuto 'Reviewed Pull Requests') | [
_{Ryan Morris}](https://github.com/ryan-morris)
[💻](https://github.com/tb/ng2-nouislider/commits?author=ryan-morris 'Code') | [
_{Sven Flickinger}](https://github.com/naeramarth7)
[💻](https://github.com/tb/ng2-nouislider/commits?author=naeramarth7 'Code') | [
_{Riku Kallio}](https://github.com/RichieRock)
[💻](https://github.com/tb/ng2-nouislider/commits?author=RichieRock 'Code') |   [
_{John Pinkster}](https://github.com/jpinkster)
[💻](https://github.com/tb/ng2-nouislider/commits?author=jpinkster 'Code')    |   [
_{Oleg Romanovskyi}](https://olg.io/)
[💻](https://github.com/tb/ng2-nouislider/commits?author=shedar 'Code')   |

| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |

|                          [
_ATeal](http://www.alexrteal.com)
[💻](https://github.com/tb/ng2-nouislider/commits?author=ATeal 'Code')                           |                            [
_{Jérémy Leherpeur}](https://github.com/amenophis)
[💻](https://github.com/tb/ng2-nouislider/commits?author=amenophis 'Code')                            |      [
_{Matt Lewis}](https://mattlewis.me/)
[💻](https://github.com/tb/ng2-nouislider/commits?author=mattlewis92 'Code')      |    [
_anysite](https://github.com/anysite)
[📖](https://github.com/tb/ng2-nouislider/commits?author=anysite 'Documentation')     |          [
_flmg](https://github.com/flmg)
[💻](https://github.com/tb/ng2-nouislider/commits?author=flmg 'Code')           | [
_SirWojtek](https://github.com/SirWojtek)
[📖](https://github.com/tb/ng2-nouislider/commits?author=SirWojtek 'Documentation') | [
_{Rubén Trujillo}](http://bi4group.com)
[💻](https://github.com/tb/ng2-nouislider/commits?author=rubentrf 'Code') |

| [
_{Olena Horal}](https://github.com/sharlatta)
[💻](https://github.com/tb/ng2-nouislider/commits?author=sharlatta 'Code') [💡](#example-sharlatta 'Examples') |                                 [
_{Jeremy Fry}](http://www.jeremyfry.com)
[💻](https://github.com/tb/ng2-nouislider/commits?author=jeremyfry 'Code')                                  |         [
_Tadeusz](https://github.com/mkp05)
[💻](https://github.com/tb/ng2-nouislider/commits?author=mkp05 'Code')         |   [
_{Philippe Roy}](http://philipperoy.github.io)
[💻](https://github.com/tb/ng2-nouislider/commits?author=PhilippeRoy 'Code')    |

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification.

Contributions of any kind are welcome!

## License

MIT