tb / ng2-nouislider

Angular2 noUiSlider directive

ng2-nouislider

Angular2 nouislider component

See demos

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

<nouislider [connect]="true" [min]="0" [max]="15" [(ngModel)]="someRange"></nouislider>

Within reactive forms

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

<form [formGroup]="form">
  <nouislider [min]="0" [max]="20" [step]="0.5" [formControl]="form.controls.single"></nouislider>
</form>

Nouislider documentation

This component is based on nouislider. Documentation about additional settings (passed in [config] @Input) can be found here.

Start development

corepack enable
pnpm i
pnpm start

Contributors

Thanks goes to these wonderful people (emoji key):

Tomasz Bak 💻 👀	Giacomo Mazzamuto 💻 👀	Ryan Morris 💻	Sven Flickinger 💻	Riku Kallio 💻	John Pinkster 💻	Oleg Romanovskyi 💻
ATeal 💻	Jérémy Leherpeur 💻	Matt Lewis 💻	anysite 📖	flmg 💻	SirWojtek 📖	Rubén Trujillo 💻
Olena Horal 💻 💡	Jeremy Fry 💻	Tadeusz 💻	Philippe Roy 💻

This project follows the all-contributors specification. Contributions of any kind are welcome!

License

MIT

ng2-nouislider's Issues

Negative Values

When I try to set the slider to negative values the component presents the wrong value

annualReturn = 0.9
<nouislider [min]="-50.0" [max]="50.0" [tooltips]="[true]" [step]="0.1" [(ngModel)]="annualReturn"></nouislider>

I get the initial value -49.1

if I change
annualReturn = 1.5

I get the initial value -48.5

So it seems to be summing two values

Step input is bugged

When setting the step to 1, sometimes you get values of like 7331.000000001.

loading without system js

Hi is there possibility run it without system js? it throws me an error that i need noUiSlider (9.2.0).
I use basic angular-cli project.

EXCEPTION: Uncaught (in promise): Error: Error in ./FilterComponent class FilterComponent - inline template:30:55 caused by: noUiSlider (9.2.0): 'start' is required.
Error: Error in ./FilterComponent class FilterComponent - inline template:30:55 caused by: noUiSlider (9.2.0): 'start' is required.

Slider Crash when min and max limit are same

WHen in our code if Min and Max limit will same it will lead to crash Website, which should be fixed asap.

disable of slider don't work

The noUiSlider could be disabled by adding the attribute disabled="true" to the noUiSlider element, but it's not working with ng2-nouislider.

How do I achieve to disable the slider? Perhaps you could add a @Input() private disabled: boolean = false to the NouisliderComponent.

NouisliderModule is not an NgModule

I just switched over to angular cli for my project and when I try and serve the project i get the below error, thus crashing the attempt to compile the application so it can be served

NouisliderModule is not an NgModule

Aot typeerror

Version: 1.5.0
Angular2 version 2.4.5 as well as 2.4.6
Angular cli version 1.0.0-beta.30 as well as 1.0.0-beta.26

During aot serve I get this error.
Any ideas?

ERROR in ./~/ng2-nouislider/src/nouislider.ts
Module build failed: TypeError: Cannot read property 'text' of undefined
    at Object.getTokenPosOfNode (/Users/tibinko/Documents/work/mates/frontend2/migration-project/node_modules/typescript/lib/typescript.js:5687:71)
    at IdentifierObject.TokenOrIdentifierObject.getStart (/Users/tibinko/Documents/work/mates/frontend2/migration-project/node_modules/typescript/lib/typescript.js:53619:23)
    at IdentifierObject.TokenOrIdentifierObject.getText (/Users/tibinko/Documents/work/mates/frontend2/migration-project/node_modules/typescript/lib/typescript.js:53640:77)
    at /Users/tibinko/Documents/work/mates/frontend2/migration-project/node_modules/@ngtools/webpack/src/loader.js:119:42
    at Array.filter (native)
    at /Users/tibinko/Documents/work/mates/frontend2/migration-project/node_modules/@ngtools/webpack/src/loader.js:118:14
    at Array.forEach (native)
    at _removeDecorators (/Users/tibinko/Documents/work/mates/frontend2/migration-project/node_modules/@ngtools/webpack/src/loader.js:109:10)
    at /Users/tibinko/Documents/work/mates/frontend2/migration-project/node_modules/@ngtools/webpack/src/loader.js:282:48
 @ ./src/$$_gendir/app/modules/app.module.ngfactory.ts 42:0-58
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

Aot compilation failed

I tried to use package with AoT and didn't succeed, compiler throws next error:
Error: Unexpected value 'NouisliderModule' imported by the module 'AppModule'

Custom format does not work with tooltips

Hello,

I'm struggling with getting my custom formatter to work with tooltips. I always receive an EXCEPTION: noUiSlider: 'tooltips' must be passed a formatter or 'false' error.

<nouislider *ngIf="isBrowser" [connect]="true" [step]="1" [min]="1" [max]="20" [tooltips]="[roomsFormatter, roomsFormatter]" [ngModel]="roomsRange" (change)="onRoomsChange($event)"></nouislider>

In my angular component I create the formatter as following:

roomsFormatter: NouiFormatter = { to: (value: number): string => { return value + ' Zimmer'; }, from: (value: string): number => { return parseFloat(value.split(' Zimmer')[0]); } };

Thanks for any help!

Range value beneath the Range handles while dragging the handles

This is more of an enhancement than issue. I wanted the user to see the value beneath the handles while he/she is dragging the handles. I had to do some DOM manipulation to do so. I am not speaking about showing it in some some input.

Value beneath the handles while dragging would be a better UX and user can see while dragging what the handle value represents. It's just a suggestion and can be labelled enhancement or this ticket can be closed.

Question: does this work with latest angular-cli and angular 2.2x?

Have you tried to run this using angular cli and latest version of angular ?

ngModel can't be 0

hey guys! I'm not sure if it is a bug, but when I set [(ngModel)] to be 0 initially, code breaks here https://github.com/tb/ng2-nouislider/blob/master/src/nouislider.js#L96 because it tries to look into formControl.value since ngModel is 0.

Reactive forms support

There is no reactive forms support right now?

Weird / wrong behavior of the ngModel

The ngModel does not work as you would expect it to. It works correctly when the component is initialized when there is no change event, but if the value is changed programmatically after initialization there is a change event which causes problems since you can not know which event is from user changing the value and which is made programmatically.

For simple test I used this:
<input [ngModel]="value || 'test'" (ngModelChange)="onInputChange($event)"/>
<nouislider ... [ngModel]="value || 0" (ngModelChange)="onValueChange($event)">

When changing the value variable input did not send change event as it should be, but the nouislider did send an event.

using Nouislider throws error "'start' is required"

I'm having issues with using nouislider... I'm creating chrome extenson with angular2 and using webpack.

In package.json I added these packages:

"ng2-nouislider": "1.5.2",
"nouislider": "9.2.0"

then in my app.module.ts i imported nouislider and added to declarations like this:

import { NouisliderComponent } from 'ng2-nouislider';

@NgModule({
  imports:      [ ... ],
  declarations: [ ... , NouisliderComponent ],
  bootstrap:    [ AppComponent ]
})

also in my component I added css file:

@Component({
    ....,
    styleUrls: ['"../node_modules/nouislider/distribute/nouislider.min.css"']
})

and in my html file I added simple slider from example:

<nouislider [min]="0" [max]="10" [step]="0.05" [disabled]="disabled"></nouislider>

when I compile and try to run I get the following error:

EXCEPTION: Uncaught (in promise): Error: noUiSlider (9.2.0): 'start' is required.
Error: noUiSlider (9.2.0): 'start' is required.
at chrome-extension://xxx/src/page-sidebar/dist/vendor.bundle.js:109854:12 [angular]
at Array.forEach (native) [angular]
at testOptions (chrome-extension://xxx/src/page-sidebar/dist/vendor.bundle.js:109848:22) [angular]
at Object.initialize [as create] (chrome-extension://xxx/src/page-sidebar/dist/vendor.bundle.js:111127:17) [angular]
at NouisliderComponent.ngOnInit (chrome-extension://xxx/src/page-sidebar/dist/vendor.bundle.js:86174:34) [angular]
at Wrapper_NouisliderComponent.ngDoCheck (/AppModule/NouisliderComponent/wrapper.ngfactory.js:159:73) [angular]
at CompiledTemplate.proxyViewClass.View_ParsingComponent0.detectChangesInternal (/AppModule/ParsingComponent/component.ngfactory.js:393:34) [angular]
at CompiledTemplate.proxyViewClass.AppView.detectChanges (chrome-extension://xxx/src/page-sidebar/dist/vendor.bundle.js:101152:14) [angular]
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (chrome-extension://xxx/src/page-sidebar/dist/vendor.bundle.js:101137:18) [angular]
at CompiledTemplate.proxyViewClass.View_ParsingComponent_Host0.detectChangesInternal (/AppModule/ParsingComponent/host.ngfactory.js:27:19) [angular]
at CompiledTemplate.proxyViewClass.AppView.detectChanges (chrome-extension://xxx/src/page-sidebar/dist/vendor.bundle.js:101152:14) [angular]
at ViewRef_.detectChanges (chrome-extension://xxx/src/page-sidebar/dist/vendor.bundle.js:62411:20) [angular]
at RouterOutlet.activate (chrome-extension://xxx/src/page-sidebar/dist/vendor.bundle.js:68699:42) [angular]
at ActivateRoutes.placeComponentIntoOutlet (chrome-extension://xxx/src/page-sidebar/dist/vendor.bundle.js:25211:16) [angular]
ErrorHandler.handleError @ error_handler.js:54
error_handler.js:59 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:59

What I am doing wrong? How to fix this issue?

EXCEPTION: noUiSlider: must pass a formatter for all handles. (When Tooltips on)

(When Tooltips on)
##Configs

ageRangeConfigs: any = {
behaviour : 'drag',
connect : true,
tooltips : [ true, true ],
// start : [20, 40],
keyboard : true,
step : 1,
pageSteps : 1,
range : {
min : 0,
max : 100
},
pips : {
mode : 'count',
density : 5,
values : 5,
stepped : true,
}
};

---

##Error

ORIGINAL EXCEPTION: noUiSlider: must pass a formatter for all handles.
ErrorHandler.handleError @ error_handler.js:49
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
error_handler.js:53 Error: noUiSlider: must pass a formatter for all handles.
at Object.testTooltips [as t] (http://localhost:4200/main.bundle.js:77114:11)
at http://localhost:4200/main.bundle.js:77269:16
at Array.forEach (native)
at testOptions (http://localhost:4200/main.bundle.js:77257:22)
at Object.initialize [as create] (http://localhost:4200/main.bundle.js:78522:17)
at NouisliderComponent.ngOnInit (http://localhost:4200/main.bundle.js:76219:34)
at Wrapper_NouisliderComponent.detectChangesInInputProps (/NouisliderModule/NouisliderComponent/wrapper.ngfactory.js:169:53)
at _View_AddCampaignComponent0.detectChangesInternal (/AppModule/AddCampaignComponent/component.ngfactory.js:1714:34)
at _View_AddCampaignComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:63926:14)
at _View_AddCampaignComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:64031:44)
ErrorHandler.handleError @ error_handler.js:53
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
error_handler.js:56 ERROR CONTEXT:

aot compatiblity

I want to compile the slider module for aot using ngc. But the input output variables are private and cannot be reached from the view.

@input() private disabled: boolean; // tslint:disable-line
@input() private behaviour: string;
@input() private connect: boolean[];
@input() private limit: number;
@input() private min: number;
@input() private max: number;
@input() private step: number;
@input() private format: NouiFormatter;
@input() private pageSteps: number;
@input() private config: any = {};
@input() private ngModel: number | number[];
@input() private keyboard: boolean;
@input() private onKeydown: any;
@input() private formControl: FormControl;
@input() private tooltips: Array;
@output() private change: EventEmitter = new EventEmitter(true);
@output() private update: EventEmitter = new EventEmitter(true);
@output() private slide: EventEmitter = new EventEmitter(true);
@output() private set: EventEmitter = new EventEmitter(true);
@output() private start: EventEmitter = new EventEmitter(true);
@output() private end: EventEmitter = new EventEmitter(true);

Doesn't work with multiple handles

Whatever I try it doesn't seem to work with multiple handles.. What should the markup and ngModel look like for it to work if it does work?

Slider not updated when inputs are updated

ng2-nouislider does not implement ngOnChanges. As a result, change detection does not happen when input parameters change. This should really be fixed are bindings are supposed to be bindings, not just a one-off initialization thing.

Hint: If you just rename ngOnInit to ngOnChanges, this might be all you need to fix the issue.

registerOnChange doesn't assign onChange

I haven't tried the onChange callback yet, but looking at the code shouldn't the registerOnChange body, which is currently:

this.onTouched = fn;

instead be the following?

this.onChange = fn;

UnhandledPromiseRejectionWarning

Can anybody help us with this matter? If you want to start this with the angular-cli:

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: NouisliderModule is not an NgModule (node:18886) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Custom Styling

How can we apply our own styles to the range slider?

How to refresh range values?

hi,

After creating slider, i am trying to update range values but new range values are not reflected to view. after i click to slider, new values are reflected.
<nouislider [config]="sliderConfig" [step]="0.5" [formControl]="filterForm.controls['range']"> </nouislider>

this.sliderConfig.range = { min: this.minPrice, max: this.maxPrice };

How to use it with webpack?

I have a problem with the loading of nouislider.min.css when I build app with the webpack. File not found. Is there any tutorial how I can fix the problem?

angular2 rc.3

Hi,

the third Release Candidate has been released. The ng2-nouislider unfortunately does not work anymore:

ERROR in ./~/ng2-nouislider/src/nouislider.js
Module not found: Error: Cannot resolve module '@angular/common/src/forms/directives/control_value_accessor' in /vagrant/solaris_
frontend/node_modules/ng2-nouislider/src
 @ ./~/ng2-nouislider/src/nouislider.js 13:31-101

Maybe you can take a look? :)

Cheers,
Tobi

Tooltips format

Hi,

Is there a way to format the tooltips with Ng2? Not sure how I can use wNum() here.

Thanks.

Strict type checking reveals a bug

Trying to compile the library with strict type checks and strict linting reveals a bug:

ERROR in noui-slider.component.ts (228,28): Argument of type 'any[]' is not assignable to parameter of type 'never[]'.
Type 'any' is not assignable to type 'never'.)

Update/slide Event handling

Hi,

Do you have an example of how I can handle events in my template?

Thanks,

_K

EXCEPTION: Cannot read property 'style' of undefined

(When Tooltips are not defined)

##Configs

ageRangeConfigs: any = {
behaviour : 'drag',
connect : true,
// tooltips : [ true, true ],
// start : [20, 40],
keyboard : true,
step : 1,
pageSteps : 1,
range : {
min : 0,
max : 100
},
pips : {
mode : 'count',
density : 5,
values : 5,
stepped : true,
}
};

---

##Error

error_handler.js:47 EXCEPTION: Cannot read property 'style' of undefined
ErrorHandler.handleError @ error_handler.js:47
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
data.args.(anonymous function) @ zone.js:970
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
data.args.(anonymous function) @ zone.js:970
error_handler.js:53 TypeError: Cannot read property 'style' of undefined
at stateUpdate (http://localhost:4200/main.bundle.js:78160:31)
at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:84655:35)
at Object.onInvokeTask (http://localhost:4200/main.bundle.js:29554:37)
at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:84654:40)
at Zone.runTask (http://localhost:4200/main.bundle.js:84544:47)
at ZoneTask.invoke (http://localhost:4200/main.bundle.js:84725:33)
at data.args.(anonymous function) (http://localhost:4200/main.bundle.js:85360:25)

vertical support?

I've been trying to create a nouislider with a vertical orientation, but the handles seem to be stuck at 0. My config looks like:

someRange=[5,95];
sideSlideConfig = {
    connect: true,
    start: [5,95],
    range: {
      min: 0,
      max: 100
    },
    pips: {
      mode: 'steps',
      stepped: true,
      density: 2,
      values: 100
    },
    orientation: 'vertical'
  };

<nouislider [config]="sideSlideConfig" [(ngModel)]="someRange"></nouislider>

Change the max value after initialization?

Is it at all possible to change the max value after component has been initialized? I have a ui where I load in different lengths of data and would like those lengths to drive the max value of the slider but when I load a different set the length changes which I need to reflect in the slider as well

Slider not working with angular2-rc1

I added nouislider and ng2-nouislider in systemjs loader. Added Nouislider in my component as a directive. When I tried to use it in my html. It's throwing a

platform-browser.umd.js:962 ORIGINAL EXCEPTION: No value accessor for ''
BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3705(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:962 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3708(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:962 Error: No value accessor for ''
    at new BaseException (common.umd.js:810)
    at _throwError (common.umd.js:3060)
    at setUpControl (common.umd.js:3037)
    at NgModel.ngOnChanges (common.umd.js:3272)
    at DebugAppView._View_BuilderComponent0.detectChangesInternal (BuilderComponent.template.js:352)
    at DebugAppView.AppView.detectChanges (core.umd.js:9996)
    at DebugAppView.detectChanges (core.umd.js:10084)
    at DebugAppView.AppView.detectViewChildrenChanges (core.umd.js:10016)
    at DebugAppView.AppView.detectChangesInternal (core.umd.js:10007)
    at DebugAppView.AppView.detectChanges (core.umd.js:9996)

Can anyone help me solving this issue?

ORIGINAL EXCEPTION: Error: noUiSlider: 'start' is required.

I followed the instructions, but receive the following error:

ORIGINAL EXCEPTION: Error: noUiSlider: 'start' is required.

Any solution?

Is it possible to get only integer as range.

value of slider range should be change on moving handles left/right instead its changing after stop scrolling.
this should be fixed asap.

Formatter support is not working

Issue 1:

Use case: a date slider (data model is UNIX time in milliseconds)

<nouislider style="margin: 80px;"
                   (change)="change()"
                   [min]="1483228800000"
                   [max]="1485820800000"
                   [step]="3600000"
                   [(ngModel)]="model"
                   [format]="formatter"
                   [tooltips]="true"></nouislider>

model: number =  1484611200000;

formatter: NouiFormatter = {

  from(value: string): number {
    console.log('from', value);
    return Date.parse(value);
  },

  to(value: number): string {
    console.log('to', value);
    return new Date(value).toISOString();
  }

};

change(): void {
  console.log(this.model);
}

This example is not working.

Very odd: If you change model: number = 1484611200000 to model: string = '2017-01-17T00:00:00', then the slider seems to be working but the model will not be updated.

Issue 2:

<nouislider style="margin: 80px;"
                   (change)="change()"
                   [min]="0"
                   [max]="9"
                   [step]="3"
                   [(ngModel)]="model"
                   [format]="formatter"
                   [tooltips]="true"></nouislider>

model: number =  6;

formatter: NouiFormatter = {

  from(value: string): number {
    console.log('from', value);
    return Number(value);
  },

  to(value: number): string {
    console.log('to', value);
    return '#' + value;
  }

};

change(): void {
  console.log(this.model);
}

In this example the model will not be updated. The from() method is called once with a number value (the model value) and will be never called with a string value. The correct from() method should be:

from(value: string): number {
  console.log('from', value);
  return Number(value.slice(1,2));
}

but this is not working.

EXCEPTION: noUiSlider (9.2.0): 'start' is required.

<nouislider [connect]="true" [min]="field.min" [max]="field.max" [step]="1" #range
(ngModelChange)="integerField($event,range,field.name)"></nouislider>

this gives ORIGINAL EXCEPTION: noUiSlider (9.2.0): 'start' is required.

No longer works with Angular2 rc.6

Getting this error on Angular2 rc.6:

zone.js:484 Unhandled Promise rejection: TypeError: core_1.Provider is not a constructor
at Object.eval (http://localhost:3001/vendor/ng2-nouislider/src/nouislider.js:26:41)

This comes from:

var NOUISLIDER_CONTROL_VALUE_ACCESSOR = new core_1.Provider(forms_1.NG_VALUE_ACCESSOR, {
useExisting: core_1.forwardRef(function () { return Nouislider; }),
multi: true
});

where core_1 = require('@angular/core');

Apparently in rc.6, @angular/core/index has no exported member 'provide'

Getting latest Value

I can get the value only after releasing the slider.

Is there way to get the value while sliding? So that I can see the value while sliding the slider. It will make easy to select a particular value.

caused by: noUiSlider (9.2.0): 'start' is required.

<nouislider [connect]="true" [min]="0" [max]="15" [step]="1" [(ngModel)]="someRange"></nouislider>
import { NouisliderComponent } from 'ng2-nouislider';

Can't use custom format

In noUiSlider you can specify a custom format

format: {
	  to: function ( value ) {
		return '$' + value;
	  },
	  from: function ( value ) {
		return value.substr(1);
	  }
	}

By doing a parseFloat in toValue this breaks the ability to use a custom format involving strings. I forked and got rid of it, also change the type to 'any'. I'm not sure if this is the best solution as now the default behavior of returning 2 decimal places no longer works so tests fail.

I can create a PR but I wanted to get some feedback on what the best way to handle this would be.

Improve demo updates workflow

Demo app sources should be part of master branch so so that its easy to do PR request with both lib changes and demo changes.

Configure webpack to use demo/src and demo/dist. The demo/src should be part of master branch and demo/dist should be submodule.

Events implemented?

Can I handle events using this? I'm trying to hide a button when the user drags the slider but I can't work out how...

https://refreshless.com/nouislider/events-callbacks/

Angular error: Unexpected token <

I'm sure I'm doing something wrong, but I get the error above as soon as I import the module. These are the steps I've taken:

• Added "nouislider": "8.4.0" and "ng2-nouislider": "^0.7.0" to my packages.json;
• Added import { Nouislider } from "ng2-nouislider"; to my app.module.ts;
• Added Nouislider to Declarations in app.module.ts.

Now, even without using the module (and, in fact, also when not doing the third step), I keep getting Error: (SystemJS) Unexpected token '<' eval@[native code] all the time...

Unexpected directive 'Nouislider' imported by the module

hello,

I'm using the angular2-seed by mgechev... (systemjs)
I got the slider working, but just if i declare it in the ngmodule... importing throws the error above.
declaring it in two modules throws of course the known error.
i mapped it and added it to packages --> #7

any suggestions?

thanks

Events have no values

Events like 'update', 'slide' are triggered, but $event is always undefined.
So I can't get intermediate values until slider is released.
I'd suggest to pass values and handle information from nouislider to emit parameter

latest version isn't on npm?

It looks like this commit never made it to npm:

04f989c

Any plans to push it?

Latest description on npm:
https://www.npmjs.com/package/ng2-nouislider
Note: ng2-nouislider is RC6 compatible using the new Forms API (@angular/forms)

thanks!

Update to typings

Requires nouislider 9.0.0 typings, see DefinitelyTyped/DefinitelyTyped#12033

Change limit dynamically

Is it possible to change the limit of the slider dynamically? As I see it's set on ngInit() but I need to change it later because I have different sliders influencing each other?

I'm trying to set it this way:
<nouislider [connect]="[false,true, false]" [limit]="sliderPointsLeft" [min]="0" [max]="1000" [step]="1" [formControl]="theForm.controls.range" (update)="sliderUpdate(item.id,$event)"></nouislider>

So sliderPointsLeft is changed any time some of the sliders is used.

Can't apply styles

I'm using scss for my styling and I can't seem to get the styles to apply to the component. I even tried just copying and pasting the styles into my scss files thinking it might be something wrong with the import statement and it still won't apply the styles to the component... Does this have to do with the fact that components are encapsulated from each other?

using System.js getting error - caused by: noUiSlider.create is not a function

Hi,
Can this component be used with System.js as well? (Is there any System.js demo?)
Using system.js -> I am getting error caused by: noUiSlider.create is not a function

TS -> nouislider.ts -> line 81:
this.slider = noUiSlider.create(

create is function of what - html element, webpack..? I am confused from import * from ... in the first line.

Thank you very much for advice.
Dalibor.