https://github.com/kennethkalmer/ember-cli-nouislider

{{range-slider}} component for ember-cli powered by noUiSlider
https://github.com/kennethkalmer/ember-cli-nouislider

ember ember-addon ember-cli nouislider range-slider-component

Last synced: about 15 hours ago
JSON representation

{{range-slider}} component for ember-cli powered by noUiSlider

• Host: GitHub
• URL: https://github.com/kennethkalmer/ember-cli-nouislider
• Owner: kennethkalmer
• License: mit
• Created: 2015-03-08T23:33:03.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-09-06T10:02:33.000Z (2 months ago)
• Last Synced: 2024-11-06T14:16:06.343Z (12 days ago)
• Topics: ember, ember-addon, ember-cli, nouislider, range-slider-component
• Language: Handlebars
• Homepage: http://kennethkalmer.github.com/ember-cli-nouislider
• Size: 2.91 MB
• Stars: 44
• Watchers: 3
• Forks: 52
• Open Issues: 44
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-cli-nouislider

[![Build Status](https://travis-ci.org/kennethkalmer/ember-cli-nouislider.svg)](https://travis-ci.org/kennethkalmer/ember-cli-nouislider)

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

[![Code Climate](https://codeclimate.com/github/kennethkalmer/ember-cli-nouislider/badges/gpa.svg)](https://codeclimate.com/github/kennethkalmer/ember-cli-nouislider)

[![Ember Observer Score](http://emberobserver.com/badges/ember-cli-nouislider.svg)](http://emberobserver.com/addons/ember-cli-nouislider)

[![Open Source Helpers](https://www.codetriage.com/kennethkalmer/ember-cli-nouislider/badges/users.svg)](https://www.codetriage.com/kennethkalmer/ember-cli-nouislider)

This ember-cli addon provides you with a range-slider component, based on

[noUiSlider](http://refreshless.com/nouislider). It includes everything you need,

and adds no extra dependencies other than noUiSlider itself (which has no external dependencies).

To get started simply install the addon:

```

$ ember install ember-cli-nouislider

```

This will install `nouislider` via Bower, and will include it into your application's

mergetree, so you don't need to worry about anything there.

## Compatibility

* Ember.js v3.12 or above

* Ember CLI v2.13 or above

* Node.js v10 or above

## Demo & documentation

Have a look around then [demo and documentation](http://kennethkalmer.github.com/ember-cli-nouislider)

to get a feel for how to use it.

## Component

You have the opportunity to customize if needed.

To do this, generate your own component and re-export

the one provided:

```

$ ember g component range-slider

```

```js

// app/components/range-slider.js

import RangeSlider from 'ember-cli-nouislider/components/range-slider';

export default RangeSlider;

```

Include the slider into your views like this:

```handlebars

{{range-slider start=someValue on-change=(action "changedAction")}}

```

And setup an action handler in your route:

```js

// app/routes/my-route.js

import Controller from '@ember/controller';

import { debug } from '@ember/debug';

export default Controller.extend({

  // ...

  actions: {

    // ...

    changedAction: function(value) {

      debug( `New slider value: ${value}`);

    }

  }

});

```

See the [documentation](https://kennethkalmer.github.com/ember-cli-nouislider/)

for more actions.

## Configuration

The component has a lot of configurable options, most of them mapping directly

to the [original options](http://refreshless.com/nouislider/slider-options/).

To see how the slider is initialized internally, please have a look at

`app/components/range-slider.js` in this project, or browse through the

[documentation](https://kennethkalmer.github.com/ember-cli-nouislider).

## License

This project is licensed under the [MIT License](LICENSE.md).