Angular wrapper component of noUiSlider library.
- Angular 9+
npm i ngx-noui-angular-slider --saveAdd 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();
}
}| 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 |
| 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);
Css Classes
interface CssClasses {
target: string;
base: string;
origin: string;
handle: string;
handleLower: string;
handleUpper: string;
touchArea: string;
horizontal: string;
vertical: string;
background: string;
connect: string;
connects: string;
ltr: string;
rtl: string;
textDirectionLtr: string;
textDirectionRtl: string;
draggable: string;
drag: string;
tap: string;
active: string;
tooltip: string;
pips: string;
pipsHorizontal: string;
pipsVertical: string;
marker: string;
markerHorizontal: string;
markerVertical: string;
markerNormal: string;
markerLarge: string;
markerSub: string;
value: string;
valueHorizontal: string;
valueVertical: string;
valueNormal: string;
valueLarge: string;
valueSub: string;
}Methods
interface API {
destroy: () => void;
steps: () => NextStepsForHandle[];
on: (eventName: string, callback: EventCallback) => void;
off: (eventName: string) => void;
get: (unencoded?: boolean) => GetResult;
set: (input: number | string | (number | string)[], fireSetEvent?: boolean, exactInput?: boolean) => void;
setHandle: (handleNumber: number, value: number | string, fireSetEvent?: boolean, exactInput?: boolean) => void;
reset: (fireSetEvent?: boolean) => void;
options: Options;
updateOptions: (optionsToUpdate: UpdatableOptions, fireSetEvent: boolean) => void;
target: HTMLElement;
removePips: () => void;
removeTooltips: () => void;
getTooltips: () => {
[handleNumber: number]: HTMLElement | false;
};
getOrigins: () => {
[handleNumber: number]: HTMLElement;
};
pips: (grid: Pips) => HTMLElement;
}Options / Configurations
// These options can be updated after initialization
interface UpdatableOptions {
range?: Range;
start?: StartValues;
margin?: number;
limit?: number;
padding?: number | number[];
snap?: boolean;
step?: number;
pips?: Pips;
format?: Formatter;
tooltips?: boolean | PartialFormatter | (boolean | PartialFormatter)[];
animate?: boolean;
}
// 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;
}Enums
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;
}