ngx-noui-angular-slider v1.0.2
ngx-noui-slider
Angular wrapper component of noUiSlider library.
Environment Support
- Angular 9+
Installation
npm i ngx-noui-angular-slider --saveDemo
Usage
Add css files to the styles section of your angular.json:
"styles": [
...
"node_modules/nouislider/dist/nouislider.css",
...
],Import NgxNouiSliderModule into the current module's imports:
import { NgxNouiSliderModule } from "ngx-noui-slider";
imports: [
// ...
NgxNouiSliderModule,
],Use in your components (add html items into the ngx-glide component):
<ngx-noui-slider
[config]="config"
(onUpdate)="update($event)"
#nouislider>
</ngx-noui-slider>You can pass configuration to the component instance:
import * as noUiSlider from 'noUiSlider';
@Component({
...
})
export class AppComponent {
config: noUiSlider.Options = {
range: {
'min': 0,
'max': 40
},
start: 20,
margin: 2,
step: 2
};
}You can access to the component menthods directly from the instance like this:
// Import from library
import { NgxNouiSliderComponent } from 'ngx-noui-slider';
@Component({
...
})
export class AppComponent {
// Get the component instance similar.
@ViewChild('nouislider', { static: false }) nouisliderRef: NgxNouiSliderComponent;
doSomething(): void {
this.nouisliderRef.get();
}
}API
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
config | Object | null | You need to pass the configuration object of type noUiSlider.Options. You can get reference from the noUiSlider library |
Outputs
| Output | Response Type | Response Properties* | Description |
|---|---|---|---|
onStart | Object | values, handle, unencoded, tap, positions, noUiSlider | This event fires when a handle is clicked (mousedown, or the equivalent touch events). |
onSlide | Object | values, handle, unencoded, tap, positions, noUiSlider | This event is useful to specifically listen to a handle being dragged, while ignoring other updates to the slider value. This event also fires on a change by a 'tap'. In most cases, the 'update' is the better choice. |
onDrag | Object | values, handle, unencoded, tap, positions, noUiSlider | Use this event to listen for when a connect element between handles is being dragged, while ignoring other updates to the slider values.The handle in the callback is the first handle connected to the dragged connect. |
onUpdate | Object | values, handle, unencoded, tap, positions, noUiSlider | Use this event when synchronizing the slider value to another element, such as an <input>. It fires every time the slider values are changed, either by a user or by calling API methods. Additionally, it fires immediately when bound. In most cases, this event should be more convenient than the 'slide' event. |
onChange | Object | values, handle, unencoded, tap, positions, noUiSlider | This event is similar to the 'change' events on regular <input> elements. It fires when a user stops sliding, when a slider value is changed by 'tap', or on keyboard interaction. |
onSet | Object | values, handle, unencoded, tap, positions, noUiSlider | Whenever a slider is changed to a new value, this event is fired. This function will trigger every time a slider stops changing, including after calls to the .set() method. This event can be considered as the 'end of slide'. |
onEnd | Object | values, handle, unencoded, tap, positions, noUiSlider | This event is the opposite of the 'start' event. If fires when a handle is released (mouseup etc), or when a slide is canceled due to other reasons (such as mouse cursor leaving the browser window). |
Note:
Events always fire in the following order:
'start' > 'slide' > 'drag' > 'update' > 'change' > 'set' > 'end'
For more info visit - noUiSlider Events
Response Properties*:
values: Current slider values (array);
handle: Handle that caused the event (number);
unencoded: Slider values without formatting (array);
tap: Event was caused by the user tapping the slider (boolean);
positions: Left offset of the handles (array);
noUiSlider: slider public Api (noUiSlider);
Interfaces
// Below options cannot be updated after initialization interface Options extends UpdatableOptions { range: Range; connect?: "lower" | "upper" | boolean | boolean[]; orientation?: "vertical" | "horizontal"; direction?: "ltr" | "rtl"; behaviour?: string; keyboardSupport?: boolean; keyboardPageMultiplier?: number; keyboardDefaultStep?: number; documentElement?: HTMLElement; cssPrefix?: string; cssClasses?: CssClasses; ariaFormat?: PartialFormatter; animationDuration?: number; }
</details>
<details>
<summary>Enums</summary>
```ts
enum PipsMode {
Range = "range",
Steps = "steps",
Positions = "positions",
Count = "count",
Values = "values"
}
enum PipsType {
None = -1,
NoValue = 0,
LargeValue = 1,
SmallValue = 2
}
interface Range {
min: SubRange;
max: SubRange;
[key: string]: SubRange;
}