Min value:
2 |Max value:
3 |Min value:
2 |Max value:
3 |{{content}}
5 | 2 | 3 | 4 |
5 | 6 |Value: {{ sliderControl.value }}
2 |Dirty: {{ sliderControl.dirty }}
3 | 4 |5 | 6 | 7 | 8 |
9 | 10 |2 | 3 |
4 |5 | 6 |
7 | 8 |
9 |
11 |
12 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/no-switching-range-slider/no-switching-range-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-no-switching-range-slider',
6 | templateUrl: './no-switching-range-slider.component.html',
7 | standalone: false
8 | })
9 | export class NoSwitchingRangeSliderComponent {
10 | minValue: number = 10;
11 | maxValue: number = 90;
12 | options: Options = {
13 | floor: 0,
14 | ceil: 100,
15 | step: 1,
16 | noSwitching: true
17 | };
18 | }
19 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/push-range-slider/push-range-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-push-range-slider',
6 | templateUrl: './push-range-slider.component.html',
7 | standalone: false
8 | })
9 | export class PushRangeSliderComponent {
10 | minValue: number = 60;
11 | maxValue: number = 70;
12 | options: Options = {
13 | floor: 0,
14 | ceil: 100,
15 | step: 1,
16 | minRange: 10,
17 | maxRange: 30,
18 | pushRange: true
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/ticks-tooltips-slider/ticks-tooltips-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-ticks-tooltips-slider',
6 | templateUrl: './ticks-tooltips-slider.component.html',
7 | standalone: false
8 | })
9 | export class TicksTooltipsSliderComponent {
10 | value: number = 5;
11 | options: Options = {
12 | floor: 0,
13 | ceil: 10,
14 | showTicks: true,
15 | ticksTooltip: (v: number): string => {
16 | return 'Tooltip for ' + v;
17 | }
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/disabled-normalisation-slider/disabled-normalisation-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-disabled-normalisation-slider',
6 | templateUrl: './disabled-normalisation-slider.component.html',
7 | standalone: false
8 | })
9 | export class DisabledNormalisationSliderComponent {
10 | minValue: number = 50;
11 | maxValue: number = 200;
12 | options: Options = {
13 | floor: 0,
14 | ceil: 250,
15 | step: 10,
16 | enforceStep: false,
17 | enforceRange: false,
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/ticks-custom-tooltips-slider/ticks-custom-tooltips-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-ticks-custom-tooltips-slider',
6 | templateUrl: './ticks-custom-tooltips-slider.component.html',
7 | standalone: false
8 | })
9 | export class TicksCustomTooltipsSliderComponent {
10 | value: number = 5;
11 | options: Options = {
12 | floor: 0,
13 | ceil: 10,
14 | showTicks: true,
15 | ticksTooltip: (v: number): string => {
16 | return 'Tooltip for ' + v;
17 | }
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/custom-legend-function-slider/custom-legend-function-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-custom-legend-function-slider',
6 | templateUrl: './custom-legend-function-slider.component.html',
7 | standalone: false
8 | })
9 | export class CustomLegendFunctionSliderComponent {
10 | value: number = 5;
11 | options: Options = {
12 | floor: 0,
13 | ceil: 10,
14 | showTicks: true,
15 | getLegend: (value: number): string => {
16 | return 'T' + value;
17 | }
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/custom-display-function-slider/custom-display-function-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-custom-display-function-slider',
6 | templateUrl: './custom-display-function-slider.component.html',
7 | standalone: false
8 | })
9 | export class CustomDisplayFunctionSliderComponent {
10 | minValue: number = 100;
11 | maxValue: number = 400;
12 | options: Options = {
13 | floor: 0,
14 | ceil: 500,
15 | translate: (value: number): string => {
16 | return '$' + value;
17 | }
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/ticks-values-tooltips-slider/ticks-values-tooltips-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-ticks-values-tooltips-slider',
6 | templateUrl: './ticks-values-tooltips-slider.component.html',
7 | standalone: false
8 | })
9 | export class TicksValuesTooltipsSliderComponent {
10 | value: number = 5;
11 | options: Options = {
12 | floor: 0,
13 | ceil: 10,
14 | showTicksValues: true,
15 | ticksValuesTooltip: (v: number): string => {
16 | return 'Tooltip for ' + v;
17 | }
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/selection-bar-gradient-slider/selection-bar-gradient-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-selection-bar-gradient-slider',
6 | templateUrl: './selection-bar-gradient-slider.component.html',
7 | standalone: false
8 | })
9 | export class SelectionBarGradientSliderComponent {
10 | minValue: number = 0;
11 | maxValue: number = 80;
12 | options: Options = {
13 | ceil: 100,
14 | showSelectionBar: true,
15 | selectionBarGradient: {
16 | from: 'white',
17 | to: '#FC0'
18 | }
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/intermediate-ticks-values-range-slider/intermediate-ticks-values-range-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-intermediate-ticks-values-range-slider',
6 | templateUrl: './intermediate-ticks-values-range-slider.component.html',
7 | standalone: false
8 | })
9 | export class IntermediateTicksValuesRangeSliderComponent {
10 | minValue: number = 15;
11 | maxValue: number = 85;
12 | options: Options = {
13 | floor: 0,
14 | ceil: 100,
15 | showTicksValues: true,
16 | tickStep: 10,
17 | tickValueStep: 10
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/read-only-slider/read-only-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-read-only-slider',
6 | templateUrl: './read-only-slider.component.html',
7 | standalone: false
8 | })
9 | export class ReadOnlySliderComponent {
10 | readOnly: boolean = true;
11 | value: number = 50;
12 | options: Options = {
13 | floor: 0,
14 | ceil: 100,
15 | readOnly: true
16 | };
17 |
18 | /* Due to the way Angular 2+ handles change detection, we have to create a new options object. */
19 | onChangeReadOnly(): void {
20 | this.options = Object.assign({}, this.options, {readOnly: this.readOnly});
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/ngx-slider/lib/math-helper.ts:
--------------------------------------------------------------------------------
1 | /** Helper with mathematical functions */
2 | export class MathHelper {
3 | /* Round numbers to a given number of significant digits */
4 | static roundToPrecisionLimit(value: number, precisionLimit: number): number {
5 | return +( value.toPrecision(precisionLimit) );
6 | }
7 |
8 | static isModuloWithinPrecisionLimit(value: number, modulo: number, precisionLimit: number): boolean {
9 | const limit: number = Math.pow(10, -precisionLimit);
10 | return Math.abs(value % modulo) <= limit || Math.abs(Math.abs(value % modulo) - modulo) <= limit;
11 | }
12 |
13 | static clampToRange(value: number, floor: number, ceil: number): number {
14 | return Math.min(Math.max(value, floor), ceil);
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/prevent-change-on-scroll-slider/prevent-change-on-scroll-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostListener, EventEmitter } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-prevent-change-on-scroll-slider',
6 | templateUrl: './prevent-change-on-scroll-slider.component.html',
7 | standalone: false,
8 | })
9 | export class PreventChangeOnScrollSliderComponent {
10 | value: number = 100;
11 | options: Options = {
12 | floor: 0,
13 | ceil: 250
14 | };
15 | emitOnScroll: EventEmitter
2 |
28 |
29 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/user-events-slider/user-events-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options, ChangeContext, PointerType } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-user-events-slider',
6 | templateUrl: './user-events-slider.component.html',
7 | standalone: false
8 | })
9 | export class UserEventsSliderComponent {
10 | minValue: number = 20;
11 | maxValue: number = 80;
12 | options: Options = {
13 | floor: 0,
14 | ceil: 100
15 | };
16 | logText: string = '';
17 |
18 | onUserChangeStart(changeContext: ChangeContext): void {
19 | this.logText += `onUserChangeStart(${this.getChangeContextString(changeContext)})\n`;
20 | }
21 |
22 | onUserChange(changeContext: ChangeContext): void {
23 | this.logText += `onUserChange(${this.getChangeContextString(changeContext)})\n`;
24 | }
25 |
26 | onUserChangeEnd(changeContext: ChangeContext): void {
27 | this.logText += `onUserChangeEnd(${this.getChangeContextString(changeContext)})\n`;
28 | }
29 |
30 | getChangeContextString(changeContext: ChangeContext): string {
31 | return `{pointerType: ${changeContext.pointerType === PointerType.Min ? 'Min' : 'Max'}, ` +
32 | `value: ${changeContext.value}, ` +
33 | `highValue: ${changeContext.highValue}}`;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/ngx-slider/lib/slider.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SliderComponent } from './slider.component';
4 | import { SliderElementDirective } from './slider-element.directive';
5 | import { SliderHandleDirective } from './slider-handle.directive';
6 | import { SliderLabelDirective } from './slider-label.directive';
7 | import { TooltipWrapperComponent } from './tooltip-wrapper.component';
8 |
9 | describe('SliderComponent', () => {
10 | let component: SliderComponent;
11 | let fixture: ComponentFixture
3 |
27 |
4 |
6 |
7 |
8 |
10 |
11 |
12 |
14 |
15 |
16 |
18 |
19 |
20 |
22 |
23 |
24 |
26 | Some content
`), but it's also possible to customise this behaviour by specifying a custom template.
6 |
7 | When using a custom template, elements that would normally be rendered as `` tags, are instead rendered using the specified template. Inside the custom template, the user is free to choose any way of rendering the tooltips, including, but of course not limited to, using ng-bootstrap.
8 |
9 | The syntax for specifying the custom template is the following:
10 | ```html
11 |
12 |
13 |
16 |
18 |
19 | ```
20 |
21 | For more concrete examples, please refer to tooltip samples on [official site](https://angular-slider.github.io/ngx-slider/demos#ticks-custom-tooltips-slider).
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/manual-refresh-slider/manual-refresh-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-manual-refresh-slider',
6 | templateUrl: './manual-refresh-slider.component.html',
7 | standalone: false
8 | })
9 | export class ManualRefreshSliderComponent {
10 | // 2019-06-11 UPDATE: The use-case in this example is now resolved on newest browser version which support ResizeObserver API
11 | // (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) - at this time it is Chrome >= 64 and Opera >= 51.
12 | // For other browsers, or older browser versions, the workaround with manualRefresh still applies.
13 | manualRefreshEnabled: boolean = true;
14 | manualRefresh: EventEmitter = new EventEmitter();
15 | isCollapsed: boolean = true;
16 | minValue: number = 20;
17 | maxValue: number = 80;
18 | options: Options = {
19 | floor: 0,
20 | ceil: 100,
21 | step: 5,
22 | animate: false // animations don't play nicely with collapse
23 | };
24 |
25 | toggleCollapsed(): void {
26 | this.isCollapsed = !this.isCollapsed;
27 | if (this.manualRefreshEnabled) {
28 | // Bootstrap uses display CSS property to effect the collapse, so we need this to manually trigger a refresh
29 | this.manualRefresh.emit();
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/ngx-slider/lib/slider-label.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, inject } from '@angular/core';
2 | import { SliderElementDirective } from './slider-element.directive';
3 | import { ValueHelper } from './value-helper';
4 | import { AllowUnsafeHtmlInSlider } from './options';
5 |
6 | @Directive({
7 | selector: '[ngxSliderLabel]',
8 | standalone: false,
9 | })
10 | export class SliderLabelDirective extends SliderElementDirective {
11 | private allowUnsafeHtmlInSlider = inject(AllowUnsafeHtmlInSlider, {
12 | optional: true,
13 | });
14 |
15 | private _value: string = null;
16 | get value(): string {
17 | return this._value;
18 | }
19 |
20 | setValue(value: string): void {
21 | let recalculateDimension: boolean = false;
22 |
23 | if (
24 | !this.alwaysHide &&
25 | (ValueHelper.isNullOrUndefined(this.value) ||
26 | this.value.length !== value.length ||
27 | (this.value.length > 0 && this.dimension === 0))
28 | ) {
29 | recalculateDimension = true;
30 | }
31 |
32 | this._value = value;
33 | if (this.allowUnsafeHtmlInSlider === false) {
34 | this.elemRef.nativeElement.innerText = value;
35 | } else {
36 | this.elemRef.nativeElement.innerHTML = value;
37 | }
38 |
39 | // Update dimension only when length of the label have changed
40 | if (recalculateDimension) {
41 | this.calculateDimension();
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/ngx-slider/lib/slider-handle.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostBinding, inject } from '@angular/core';
2 | import { SliderElementDirective } from './slider-element.directive';
3 | import { DOCUMENT } from '@angular/common';
4 |
5 | @Directive({
6 | selector: '[ngxSliderHandle]',
7 | standalone: false,
8 | })
9 | export class SliderHandleDirective extends SliderElementDirective {
10 | @HostBinding('class.ngx-slider-active')
11 | active: boolean = false;
12 |
13 | @HostBinding('attr.role')
14 | role: string = '';
15 |
16 | @HostBinding('attr.tabindex')
17 | tabindex: string = '';
18 |
19 | @HostBinding('attr.aria-orientation')
20 | ariaOrientation: string = '';
21 |
22 | @HostBinding('attr.aria-label')
23 | ariaLabel: string = '';
24 |
25 | @HostBinding('attr.aria-labelledby')
26 | ariaLabelledBy: string = '';
27 |
28 | @HostBinding('attr.aria-valuenow')
29 | ariaValueNow: string = '';
30 |
31 | @HostBinding('attr.aria-valuetext')
32 | ariaValueText: string = '';
33 |
34 | @HostBinding('attr.aria-valuemin')
35 | ariaValueMin: string = '';
36 |
37 | @HostBinding('attr.aria-valuemax')
38 | ariaValueMax: string = '';
39 |
40 | private document: Document = inject(DOCUMENT);
41 |
42 | focus(): void {
43 | this.elemRef.nativeElement.focus();
44 | }
45 |
46 | focusIfNeeded(): void {
47 | if (this.document.activeElement !== this.elemRef.nativeElement) {
48 | this.elemRef.nativeElement.focus();
49 | }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/ngx-slider/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "ignorePatterns": [
4 | "projects/**/*"
5 | ],
6 | "overrides": [
7 | {
8 | "files": [
9 | "*.ts"
10 | ],
11 | "extends": [
12 | "eslint:recommended",
13 | "plugin:@typescript-eslint/recommended",
14 | "plugin:@angular-eslint/recommended",
15 | "plugin:@angular-eslint/template/process-inline-templates"
16 | ],
17 | "rules": {
18 | "@angular-eslint/directive-selector": [
19 | "error",
20 | {
21 | "type": "attribute",
22 | "prefix": "ngx",
23 | "style": "camelCase"
24 | }
25 | ],
26 | "@angular-eslint/component-selector": [
27 | "error",
28 | {
29 | "type": "element",
30 | "prefix": "ngx",
31 | "style": "kebab-case"
32 | }
33 | ],
34 | "@angular-eslint/prefer-standalone": "off",
35 | "@typescript-eslint/no-explicit-any": "off",
36 | "@typescript-eslint/no-unused-vars": [
37 | "error",
38 | {
39 | "args": "none"
40 | }
41 | ]
42 | }
43 | },
44 | {
45 | "files": [
46 | "*.html"
47 | ],
48 | "extends": [
49 | "plugin:@angular-eslint/template/recommended",
50 | "plugin:@angular-eslint/template/accessibility"
51 | ],
52 | "rules": {}
53 | }
54 | ]
55 | }
56 |
--------------------------------------------------------------------------------
/scripts/utils.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 |
4 | /** Get all files in directory recursively, synchronously */
5 | function readdirRecursivelySync(dir) {
6 | let results = [];
7 | const list = fs.readdirSync(dir);
8 | for (let file of list) {
9 | file = path.resolve(dir, file);
10 | const stat = fs.statSync(file);
11 | if (stat && stat.isDirectory()) {
12 | results = results.concat(readdirRecursivelySync(file));
13 | } else {
14 | results.push(file);
15 | }
16 | }
17 | return results;
18 | }
19 |
20 | /** Copy README.md from given location to the library directory */
21 | function copyReadmeMd(sourceReadmeMd) {
22 | const libReadmeFile = path.resolve(__dirname, '../src/ngx-slider/README.md');
23 |
24 | const sourceReadme = fs.readFileSync(sourceReadmeMd, { encoding: 'utf8'});
25 | fs.writeFileSync(libReadmeFile, sourceReadme, {encoding: 'utf8'});
26 | }
27 |
28 | /** Escape { and } or otherwise Angular will complain when we're not actually using them for bindings */
29 | function escapeBracesForAngular(html) {
30 | return html.replace(/([{}])/g, "{{ '$1' }}");
31 | }
32 |
33 | /** Escape at (@) character, which is also reserved in Angular templates now. */
34 | function escapeAtForAngular(html) {
35 | return html.replace(/@/g, "@");
36 | }
37 |
38 |
39 | exports.readdirRecursivelySync = readdirRecursivelySync;
40 | exports.copyReadmeMd = copyReadmeMd;
41 | exports.escapeBracesForAngular = escapeBracesForAngular;
42 | exports.escapeAtForAngular = escapeAtForAngular;
--------------------------------------------------------------------------------
/src/demo-app/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "ignorePatterns": [
4 | "projects/**/*"
5 | ],
6 | "overrides": [
7 | {
8 | "files": [
9 | "*.ts"
10 | ],
11 | "extends": [
12 | "eslint:recommended",
13 | "plugin:@typescript-eslint/recommended",
14 | "plugin:@angular-eslint/recommended",
15 | "plugin:@angular-eslint/template/process-inline-templates"
16 | ],
17 | "rules": {
18 | "@angular-eslint/directive-selector": [
19 | "error",
20 | {
21 | "type": "attribute",
22 | "prefix": "app",
23 | "style": "camelCase"
24 | }
25 | ],
26 | "@angular-eslint/component-selector": [
27 | "error",
28 | {
29 | "type": "element",
30 | "prefix": "app",
31 | "style": "kebab-case"
32 | }
33 | ],
34 | "@angular-eslint/prefer-standalone": "off",
35 | "@typescript-eslint/no-explicit-any": "off",
36 | "@typescript-eslint/no-unused-vars": [
37 | "error",
38 | {
39 | "args": "none"
40 | }
41 | ]
42 | }
43 | },
44 | {
45 | "files": [
46 | "*.html"
47 | ],
48 | "extends": [
49 | "plugin:@angular-eslint/template/recommended",
50 | "plugin:@angular-eslint/template/accessibility"
51 | ],
52 | "rules": {
53 | "@angular-eslint/template/prefer-control-flow": "off"
54 | }
55 | }
56 | ]
57 | }
58 |
--------------------------------------------------------------------------------
/src/demo-app/app/home.component.scss:
--------------------------------------------------------------------------------
1 | .horizontal-slider-container {
2 | width: 80%;
3 | }
4 |
5 | .inline-with-vertical-slider-container {
6 | height: auto;
7 | }
8 |
9 | @media(min-width: 992px) {
10 | .inline-with-vertical-slider-container {
11 | height: 10rem;
12 | }
13 | }
14 |
15 | .vertical-slider-container {
16 | text-align: left;
17 | margin-left: calc(50% - 2rem);
18 | height: 10rem;
19 | }
20 |
21 | // We need to use ::ng-deep to overcome view encapsulation
22 | ::ng-deep {
23 | .styled-slider.ngx-slider .ngx-slider-bar {
24 | background: #ffe4d1;
25 | height: 2px;
26 | }
27 | .styled-slider.ngx-slider .ngx-slider-selection {
28 | background: orange;
29 | }
30 |
31 | .styled-slider.ngx-slider .ngx-slider-pointer {
32 | width: 8px;
33 | height: 16px;
34 | top: auto; /* to remove the default positioning */
35 | bottom: 0;
36 | background-color: #333;
37 | border-top-left-radius: 3px;
38 | border-top-right-radius: 3px;
39 | }
40 |
41 | .styled-slider.ngx-slider .ngx-slider-pointer:after {
42 | display: none;
43 | }
44 |
45 | .styled-slider.ngx-slider .ngx-slider-bubble {
46 | bottom: 14px;
47 | }
48 |
49 | .styled-slider.ngx-slider .ngx-slider-limit {
50 | font-weight: bold;
51 | color: orange;
52 | }
53 |
54 | .styled-slider.ngx-slider .ngx-slider-tick {
55 | width: 1px;
56 | height: 10px;
57 | margin-left: 4px;
58 | border-radius: 0;
59 | background: #ffe4d1;
60 | top: -1px;
61 | }
62 |
63 | .styled-slider.ngx-slider .ngx-slider-tick.ngx-slider-selected {
64 | background: orange;
65 | }
66 | }
--------------------------------------------------------------------------------
/src/ngx-slider/lib/variables.scss:
--------------------------------------------------------------------------------
1 | @mixin ng-deep($enableNgDeep: true) {
2 | @if $enableNgDeep {
3 | ::ng-deep {
4 | @content;
5 | }
6 | } @else {
7 | @content;
8 | }
9 | }
10 |
11 | @mixin rounded($radius: 2px) {
12 | -webkit-border-radius: $radius;
13 | -moz-border-radius: $radius;
14 | border-radius: $radius;
15 | }
16 |
17 | $enableNgDeep: true !default;
18 |
19 | $handleActiveColor: #451aff !default;
20 | $handleHoverColor: #fff !default;
21 | $labelTextColor: #55637d !default;
22 | $handleBgColor: #0db9f0 !default;
23 | $handleInnerColor: #fff !default;
24 | $handleDisabledColor: #d8e0f3 !default;
25 | $limitLabelTextColor: $labelTextColor !default;
26 | $barFillColor: $handleBgColor !default;
27 | $barDisabledFillColor: #8b91a2 !default;
28 | $barNormalColor: #d8e0f3 !default;
29 | $barLeftOutSelectionColor: #df002d !default;
30 | $barRightOutSelectionColor: #03a688 !default;
31 |
32 | $ticksColor: $barNormalColor !default;
33 | $selectedTicksColor: $barFillColor !default;
34 | $ticksWidth: 10px !default;
35 | $ticksHeight: 10px !default;
36 | $ticksValuePosition: -34px !default;
37 | $ticksLegendPosition: 24px !default;
38 | $ticksValuePositionOnVertical: 24px !default;
39 | $tickLegendMaxWidth: 50px !default;
40 |
41 | $handleSize: 32px !default;
42 | $handlePointerSize: 8px !default;
43 | $bubblePaddingVertical: 1px !default;
44 | $bubblePaddingHorizontal: 3px !default;
45 | $labelFontSize: 16px !default;
46 | $barDimension: 4px !default;
47 |
48 | $withLegendMargin: 40px !default;
49 |
50 | $sliderMargin: 15px !default;
51 | $sliderMarginWithLabel: 35px !default;
52 | $sliderVerticalMargin: 20px !default;
53 |
54 | $animationDuration: 0.3s !default;
--------------------------------------------------------------------------------
/src/demo-app/app/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options, LabelType } from '@local/ngx-slider';
3 |
4 | @Component({
5 | selector: 'app-home',
6 | templateUrl: './home.component.html',
7 | styleUrls: ['./home.component.scss'],
8 | standalone: false
9 | })
10 | export class HomeComponent {
11 | simpleSliderValue: number = 50;
12 | simpleSliderOptions: Options = {
13 | floor: 0,
14 | ceil: 100
15 | };
16 |
17 | rangeSliderLowValue: number = 25;
18 | rangeSliderHighValue: number = 75;
19 | rangeSliderOptions: Options = {
20 | floor: 0,
21 | ceil: 100
22 | };
23 |
24 | ticksSliderValue: number = 5;
25 | ticksSliderOptions: Options = {
26 | floor: 0,
27 | ceil: 10,
28 | step: 1,
29 | showTicks: true,
30 | showTicksValues: true
31 | };
32 |
33 | customisedSliderLowValue: number = 150;
34 | customisedSliderHighValue: number = 350;
35 | customisedSliderOptions: Options = {
36 | floor: 0,
37 | ceil: 500,
38 | translate: (value: number, label: LabelType): string => {
39 | switch (label) {
40 | case LabelType.Low:
41 | return 'Min price: $' + value;
42 | case LabelType.High:
43 | return 'Max price: $' + value;
44 | default:
45 | return '$' + value;
46 | }
47 | }
48 | };
49 |
50 | styledSliderLowValue: number = 30;
51 | styledSliderHighValue: number = 70;
52 | styledSliderOptions: Options = {
53 | floor: 0,
54 | ceil: 100,
55 | step: 10,
56 | showTicks: true
57 | };
58 |
59 | verticalSliderValue: number = 5;
60 | verticalSliderOptions: Options = {
61 | floor: 0,
62 | ceil: 10,
63 | vertical: true
64 | };
65 |
66 | constructor() { }
67 | }
68 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/vertical-sliders/vertical-sliders.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Options } from '@local/ngx-slider';
3 |
4 | interface SimpleSliderModel {
5 | value: number;
6 | options: Options;
7 | }
8 |
9 | interface RangeSliderModel {
10 | minValue: number;
11 | maxValue: number;
12 | options: Options;
13 | }
14 |
15 | @Component({
16 | selector: 'app-vertical-sliders',
17 | templateUrl: './vertical-sliders.component.html',
18 | standalone: false
19 | })
20 | export class VerticalSlidersComponent {
21 | verticalSlider1: SimpleSliderModel = {
22 | value: 5,
23 | options: {
24 | floor: 0,
25 | ceil: 10,
26 | vertical: true
27 | }
28 | };
29 |
30 | verticalSlider2: RangeSliderModel = {
31 | minValue: 20,
32 | maxValue: 80,
33 | options: {
34 | floor: 0,
35 | ceil: 100,
36 | vertical: true
37 | }
38 | };
39 |
40 | verticalSlider3: SimpleSliderModel = {
41 | value: 5,
42 | options: {
43 | floor: 0,
44 | ceil: 10,
45 | vertical: true,
46 | showTicks: true
47 | }
48 | };
49 |
50 | verticalSlider4: RangeSliderModel = {
51 | minValue: 1,
52 | maxValue: 5,
53 | options: {
54 | floor: 0,
55 | ceil: 6,
56 | vertical: true,
57 | showTicksValues: true
58 | }
59 | };
60 |
61 | verticalSlider5: SimpleSliderModel = {
62 | value: 50,
63 | options: {
64 | floor: 0,
65 | ceil: 100,
66 | vertical: true,
67 | showSelectionBar: true
68 | }
69 | };
70 |
71 | verticalSlider6: SimpleSliderModel = {
72 | value: 6,
73 | options: {
74 | floor: 0,
75 | ceil: 6,
76 | vertical: true,
77 | showSelectionBar: true,
78 | showTicksValues: true,
79 | ticksValuesTooltip: (v: number): string => {
80 | return 'Tooltip for ' + v;
81 | }
82 | }
83 | };
84 | }
85 |
--------------------------------------------------------------------------------
/src/ngx-slider/lib/value-helper.ts:
--------------------------------------------------------------------------------
1 | import { CustomStepDefinition } from './options';
2 |
3 | /**
4 | * Collection of functions to handle conversions/lookups of values
5 | */
6 | export class ValueHelper {
7 | static isNullOrUndefined(value: any): boolean {
8 | return value === undefined || value === null;
9 | }
10 |
11 | static areArraysEqual(array1: any[], array2: any[]): boolean {
12 | if (array1.length !== array2.length) {
13 | return false;
14 | }
15 |
16 | for (let i: number = 0; i < array1.length; ++i) {
17 | if (array1[i] !== array2[i]) {
18 | return false;
19 | }
20 | }
21 |
22 | return true;
23 | }
24 |
25 | static linearValueToPosition(val: number, minVal: number, maxVal: number): number {
26 | const range: number = maxVal - minVal;
27 | return (val - minVal) / range;
28 | }
29 |
30 | static logValueToPosition(val: number, minVal: number, maxVal: number): number {
31 | val = Math.log(val);
32 | minVal = Math.log(minVal);
33 | maxVal = Math.log(maxVal);
34 | const range: number = maxVal - minVal;
35 | return (val - minVal) / range;
36 | }
37 |
38 | static linearPositionToValue(percent: number, minVal: number, maxVal: number): number {
39 | return percent * (maxVal - minVal) + minVal;
40 | }
41 |
42 | static logPositionToValue(percent: number, minVal: number, maxVal: number): number {
43 | minVal = Math.log(minVal);
44 | maxVal = Math.log(maxVal);
45 | const value: number = percent * (maxVal - minVal) + minVal;
46 | return Math.exp(value);
47 | }
48 |
49 | static findStepIndex(modelValue: number, stepsArray: CustomStepDefinition[]): number {
50 | const differences: number[] = stepsArray.map((step: CustomStepDefinition): number => Math.abs(modelValue - step.value));
51 |
52 | let minDifferenceIndex: number = 0;
53 | for (let index: number = 0; index < stepsArray.length; index++) {
54 | if (differences[index] !== differences[minDifferenceIndex] && differences[index] < differences[minDifferenceIndex]) {
55 | minDifferenceIndex = index;
56 | }
57 | }
58 |
59 | return minDifferenceIndex;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/e2e/utils/custom-interactions.ts:
--------------------------------------------------------------------------------
1 | import { Locator } from '@playwright/test';
2 |
3 | export async function mouseDragRelative(locator: Locator, options: {offsetX: number, offsetY: number}) {
4 | const page = locator.page();
5 | const box = await locator.boundingBox();
6 |
7 | const centerX = box.x + box.width / 2;
8 | const centerY = box.y + box.height / 2;
9 |
10 | await page.mouse.move(centerX, centerY);
11 | await page.mouse.down({ button: 'left' });
12 | await page.mouse.move(centerX + options.offsetX, centerY + options.offsetY);
13 | await page.mouse.up({ button: 'left' });
14 | }
15 |
16 | export async function touchDragRelative(locator: Locator, options: {offsetX: number, offsetY: number}) {
17 | const page = locator.page();
18 | const box = await locator.boundingBox();
19 |
20 | const centerX = box.x + box.width / 2;
21 | const centerY = box.y + box.height / 2;
22 |
23 | // Playwright doesn't support touch gestures yet, so this is a crude workaround
24 | await page.evaluate(
25 | ([centerX, centerY, offsetX, offsetY]) => {
26 | const element = document.elementFromPoint(centerX, centerY);
27 |
28 | const touchStartEvent = new PointerEvent("pointerdown", {
29 | bubbles: true,
30 | cancelable: true,
31 | composed: true,
32 | isPrimary: true,
33 | pointerType: 'touch',
34 | clientX: centerX,
35 | clientY: centerY,
36 | });
37 | element.dispatchEvent(touchStartEvent);
38 |
39 | const touchMoveEvent1 = new PointerEvent("pointermove", {
40 | bubbles: true,
41 | cancelable: true,
42 | composed: true,
43 | isPrimary: true,
44 | pointerType: 'touch',
45 | clientX: centerX + offsetX,
46 | clientY: centerY + offsetY,
47 | });
48 | element.dispatchEvent(touchMoveEvent1);
49 |
50 | const touchEndEvent = new PointerEvent("pointerup", {
51 | bubbles: true,
52 | cancelable: true,
53 | composed: true,
54 | isPrimary: true,
55 | pointerType: 'touch',
56 | clientX: centerX + offsetX,
57 | clientY: centerY + offsetY
58 | });
59 | element.dispatchEvent(touchEndEvent);
60 | },
61 | [centerX, centerY, options.offsetX, options.offsetY]
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/src/ngx-slider/lib/math-helper.spec.ts:
--------------------------------------------------------------------------------
1 | import { MathHelper } from './math-helper';
2 |
3 | describe('MathHelper', () => {
4 | describe('roundToPrecisionLimit', () => {
5 | it('gets rid of digits to the left of precision limit', () => {
6 | expect(MathHelper.roundToPrecisionLimit(123456789010 + 1, 11)).toEqual(123456789010);
7 | expect(MathHelper.roundToPrecisionLimit(123456789010 - 1, 11)).toEqual(123456789010);
8 | });
9 |
10 | it('keeps digits to the right of precision limit', () => {
11 | expect(MathHelper.roundToPrecisionLimit(123456789010 + 10, 11)).toEqual(123456789010 + 10);
12 | expect(MathHelper.roundToPrecisionLimit(123456789010 - 10, 11)).toEqual(123456789010 - 10);
13 | });
14 |
15 | it('helps with rounding common floating point operations', () => {
16 | expect(0.3 - 0.2).not.toEqual(0.1); // yeah, floating point
17 | expect(MathHelper.roundToPrecisionLimit(0.3 - 0.2, 12)).toEqual(0.1); // that's better
18 | });
19 | });
20 |
21 | describe('isModuloWithinPrecisionLimit', () => {
22 | it('works for decimal modulo', () => {
23 | expect(2 % 0.1 === 0).toBeFalsy();
24 | expect(MathHelper.isModuloWithinPrecisionLimit(2, 0.1, 10)).toBeTruthy();
25 |
26 | expect(MathHelper.isModuloWithinPrecisionLimit(2 - 1e-12, 0.1, 10)).toBeTruthy();
27 | expect(MathHelper.isModuloWithinPrecisionLimit(2 + 1e-12, 0.1, 10)).toBeTruthy();
28 |
29 | expect(MathHelper.isModuloWithinPrecisionLimit(2, 0.1 - 1e-12, 10)).toBeTruthy();
30 | expect(MathHelper.isModuloWithinPrecisionLimit(2, 0.1 + 1e-12, 10)).toBeTruthy();
31 |
32 | expect(MathHelper.isModuloWithinPrecisionLimit(2 + 1e-9, 0.1, 10)).toBeFalsy();
33 | expect(MathHelper.isModuloWithinPrecisionLimit(2 - 1e-9, 0.1, 10)).toBeFalsy();
34 | expect(MathHelper.isModuloWithinPrecisionLimit(2, 0.1 - 1e-9, 10)).toBeFalsy();
35 | expect(MathHelper.isModuloWithinPrecisionLimit(2, 0.1 + 1e-9, 10)).toBeFalsy();
36 | });
37 | });
38 |
39 | describe('clampToRange', () => {
40 | it('returns original value if in range', () => {
41 | expect(MathHelper.clampToRange(40, 0, 100)).toEqual(40);
42 | });
43 |
44 | it('returns floor if value is below floor', () => {
45 | expect(MathHelper.clampToRange(-10, 0, 100)).toEqual(0);
46 | });
47 |
48 | it('returns ceil if value is above ceil', () => {
49 | expect(MathHelper.clampToRange(110, 0, 100)).toEqual(100);
50 | });
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/src/demo-app/app/header.component.html:
--------------------------------------------------------------------------------
1 |
2 |
54 |
--------------------------------------------------------------------------------
/src/demo-app/app/app-router.config.ts:
--------------------------------------------------------------------------------
1 | import { ExtraOptions, Routes } from '@angular/router';
2 |
3 | import { DemosComponent } from './demos.component';
4 | import { DocsComponent } from './docs.component';
5 | import { HomeComponent } from './home.component';
6 | import {
7 | CustomTicksLegendSliderComponent,
8 | DraggableRangeOnlySliderComponent,
9 | DraggableRangeSliderComponent,
10 | LimitedRangeSliderComponent,
11 | LimitedSliderComponent,
12 | NoSwitchingRangeSliderComponent,
13 | PreventChangeOnScrollSliderComponent,
14 | PushRangeSliderComponent,
15 | RangeSliderComponent,
16 | ReactiveFormRangeSliderComponent,
17 | ReactiveFormSimpleSliderComponent,
18 | RightToLeftSliderComponent,
19 | SimpleSliderComponent,
20 | TicksValuesSliderComponent,
21 | VerticalSlidersComponent,
22 | } from './snippets';
23 |
24 | export const routerConfig: Routes = [
25 | { path: '', pathMatch: 'full', component: HomeComponent },
26 | { path: 'home', component: HomeComponent },
27 | { path: 'demos', component: DemosComponent },
28 | { path: 'docs', component: DocsComponent },
29 | { path: 'api', redirectTo: 'docs' },
30 |
31 | // pages for e2e testing
32 | { path: 'custom-ticks-legend-slider', component: CustomTicksLegendSliderComponent },
33 | { path: 'draggable-range-only-slider', component: DraggableRangeOnlySliderComponent },
34 | { path: 'draggable-range-slider', component: DraggableRangeSliderComponent },
35 | { path: 'limited-range-slider', component: LimitedRangeSliderComponent },
36 | { path: 'limited-slider', component: LimitedSliderComponent },
37 | { path: 'no-switching-range-slider', component: NoSwitchingRangeSliderComponent },
38 | { path: 'prevent-change-on-scroll-slider', component: PreventChangeOnScrollSliderComponent },
39 | { path: 'push-range-slider', component: PushRangeSliderComponent },
40 | { path: 'range-slider', component: RangeSliderComponent },
41 | { path: 'reactive-form-range-slider', component: ReactiveFormRangeSliderComponent },
42 | { path: 'reactive-form-simple-slider', component: ReactiveFormSimpleSliderComponent },
43 | { path: 'right-to-left-slider', component: RightToLeftSliderComponent },
44 | { path: 'simple-slider', component: SimpleSliderComponent },
45 | { path: 'ticks-values-slider', component: TicksValuesSliderComponent },
46 | { path: 'vertical-sliders', component: VerticalSlidersComponent },
47 |
48 | { path: '**', pathMatch: 'full', redirectTo: ''}
49 | ];
50 |
51 | export const routerOptions: ExtraOptions = {
52 | useHash: false,
53 | anchorScrolling: 'enabled'
54 | };
55 |
--------------------------------------------------------------------------------
/e2e/limited-slider.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, Page, Locator } from '@playwright/test';
2 | import { expect, mouseDragRelative, touchDragRelative } from './utils';
3 |
4 | async function setUp(page: Page) {
5 | await page.setViewportSize({ width: 800, height: 600 });
6 | await page.goto('/limited-slider?testMode=true');
7 | }
8 |
9 | function getSlider(page: Page): Locator {
10 | return page.locator('ngx-slider');
11 | }
12 |
13 | function getSliderFloorLabel(page: Page): Locator {
14 | return getSlider(page).locator('span.ngx-slider-floor');
15 | }
16 |
17 | function getSliderCeilLabel(page: Page): Locator {
18 | return getSlider(page).locator('span.ngx-slider-ceil');
19 | }
20 |
21 | function getSliderPointer(page: Page): Locator {
22 | return getSlider(page).locator('span.ngx-slider-pointer-min');
23 | }
24 |
25 | function getSliderPointerLabel(page: Page): Locator {
26 | return getSlider(page).locator('span.ngx-slider-model-value');
27 | }
28 |
29 |
30 | test('limited slider initial state displays starting values', async ({ page }) => {
31 | await setUp(page);
32 |
33 | await expect(getSliderFloorLabel(page)).toHaveText('0');
34 | await expect(getSliderCeilLabel(page)).toHaveText('100');
35 | await expect(getSliderPointerLabel(page)).toHaveText('50');
36 | });
37 |
38 | test('limited slider after dragging pointer to above the low limit moves the pointer to the new position', async ({ page }) => {
39 | await setUp(page);
40 |
41 | await mouseDragRelative(getSliderPointer(page), {offsetX: -286, offsetY: 0});
42 |
43 | await expect(getSliderPointerLabel(page)).toHaveText('11');
44 | });
45 |
46 | test('limited slider after dragging pointer beyond the low limit stops the pointer at the low limit', async ({ page }) => {
47 | await setUp(page);
48 |
49 | await mouseDragRelative(getSliderPointer(page), {offsetX: -300, offsetY: 0});
50 |
51 | await expect(getSliderPointerLabel(page)).toHaveText('10');
52 | });
53 |
54 | test('limited slider after dragging pointer to above the high limit moves the pointer to the new position', async ({ page }) => {
55 | await setUp(page);
56 |
57 | await mouseDragRelative(getSliderPointer(page), {offsetX: 286, offsetY: 0});
58 |
59 | await expect(getSliderPointerLabel(page)).toHaveText('89');
60 | });
61 |
62 | test('limited slider after dragging pointer beyond the high limit stops the pointer at the high limit', async ({ page }) => {
63 | await setUp(page);
64 |
65 | await mouseDragRelative(getSliderPointer(page), {offsetX: 300, offsetY: 0});
66 |
67 | await expect(getSliderPointerLabel(page)).toHaveText('90');
68 | });
69 |
--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, devices } from '@playwright/test';
2 |
3 | /**
4 | * Read environment variables from file.
5 | * https://github.com/motdotla/dotenv
6 | */
7 | // require('dotenv').config();
8 |
9 | /**
10 | * See https://playwright.dev/docs/test-configuration.
11 | */
12 | export default defineConfig({
13 | testDir: './e2e',
14 | /* Run tests in files in parallel */
15 | fullyParallel: true,
16 | /* Fail the build on CI if you accidentally left test.only in the source code. */
17 | forbidOnly: !!process.env.CI,
18 | /* Retry on CI only */
19 | retries: process.env.CI ? 2 : 0,
20 | /* Opt out of parallel tests on CI. */
21 | workers: process.env.CI ? 1 : undefined,
22 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */
23 | reporter: 'html',
24 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
25 | use: {
26 | /* Base URL to use in actions like `await page.goto('/')`. */
27 | baseURL: 'http://localhost:4200',
28 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
29 | trace: 'on-first-retry',
30 | /* Capture screenshots to see what happened in each test */
31 | screenshot: 'on',
32 | },
33 | /* Set test timeout to 30 seconds */
34 | timeout: 30 * 1000,
35 |
36 | /* Configure projects for major browsers */
37 | projects: [
38 | {
39 | name: 'chromium',
40 | use: {
41 | ...devices['Desktop Chrome'],
42 | /* We need touch events for some tests */
43 | hasTouch: true,
44 | /* Uncomment for debugging */
45 | //headless: false,
46 | },
47 | },
48 |
49 | // {
50 | // name: 'firefox',
51 | // use: { ...devices['Desktop Firefox'] },
52 | // },
53 |
54 | // {
55 | // name: 'webkit',
56 | // use: { ...devices['Desktop Safari'] },
57 | // },
58 |
59 | /* Test against mobile viewports. */
60 | // {
61 | // name: 'Mobile Chrome',
62 | // use: { ...devices['Pixel 5'] },
63 | // },
64 | // {
65 | // name: 'Mobile Safari',
66 | // use: { ...devices['iPhone 12'] },
67 | // },
68 |
69 | /* Test against branded browsers. */
70 | // {
71 | // name: 'Microsoft Edge',
72 | // use: { ...devices['Desktop Edge'], channel: 'msedge' },
73 | // },
74 | // {
75 | // name: 'Google Chrome',
76 | // use: { ...devices['Desktop Chrome'], channel: 'chrome' },
77 | // },
78 | ],
79 |
80 | /* Run Angular server before starting the tests */
81 | webServer: {
82 | // only start "npx ng serve"; assume that "npm run prepare" has already been done
83 | command: 'npx ng serve',
84 | port: 4200,
85 | timeout: 120 * 1000,
86 | },
87 | });
88 |
--------------------------------------------------------------------------------
/scripts/generate-lib-files.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const path = require("path");
3 |
4 | const utils = require("./utils.js");
5 |
6 | /** Generate package.json file based on package.json.template and main package.json */
7 | function generatePackageJson() {
8 | const mainFile = path.resolve(__dirname, "../package.json");
9 | const libTemplateFile = path.resolve(
10 | __dirname,
11 | "../src/ngx-slider/package.json.template"
12 | );
13 | const libFile = path.resolve(__dirname, "../src/ngx-slider/package.json");
14 |
15 | const libTemplateConfig = JSON.parse(
16 | fs.readFileSync(libTemplateFile, { encoding: "utf8" })
17 | );
18 | const mainConfig = JSON.parse(
19 | fs.readFileSync(mainFile, { encoding: "utf8" })
20 | );
21 |
22 | let libConfig = {};
23 |
24 | for (let key of libTemplateConfig.keysToCopyFromMainPackageJson) {
25 | libConfig[key] = mainConfig[key];
26 | }
27 | libConfig.dependencies = {};
28 | for (let dependency of libTemplateConfig.dependenciesToCopyFromMainPackageJson) {
29 | libConfig.dependencies[dependency] = mainConfig.dependencies[dependency];
30 | }
31 | libConfig.peerDependencies = {};
32 | for (let dependency of libTemplateConfig.dependenciesToCopyAsPeerDependenciesFromMainPackageJson) {
33 | libConfig.peerDependencies[dependency] =
34 | mainConfig.dependencies[dependency];
35 | }
36 |
37 | libConfig = Object.assign({}, libConfig, libTemplateConfig, libConfig);
38 | delete libConfig.keysToCopyFromMainPackageJson;
39 | delete libConfig.dependenciesToCopyFromMainPackageJson;
40 | delete libConfig.dependenciesToCopyAsPeerDependenciesFromMainPackageJson;
41 |
42 | const prettyPrintedLibConfig = JSON.stringify(libConfig, null, 2);
43 |
44 | fs.writeFileSync(libFile, prettyPrintedLibConfig, { encoding: "utf8" });
45 | }
46 |
47 | /** Convert public_api.json to public_api.ts */
48 | function generatePublicApiTs() {
49 | const configFile = path.resolve(
50 | __dirname,
51 | "../src/ngx-slider/lib/public_api.json"
52 | );
53 | const tsFile = path.resolve(__dirname, "../src/ngx-slider/lib/public_api.ts");
54 |
55 | const config = JSON.parse(fs.readFileSync(configFile, { encoding: "utf8" }));
56 |
57 | let tsFileContent = "";
58 |
59 | for (let exportDef of config.exports) {
60 | if (exportDef.what instanceof Array) {
61 | const whats = exportDef.what.join(", ");
62 | tsFileContent += `export { ${whats} } from '${exportDef.file}';\n`;
63 | } else {
64 | tsFileContent += `export ${exportDef.what} from '${exportDef.file}';\n`;
65 | }
66 | }
67 |
68 | fs.writeFileSync(tsFile, tsFileContent, { encoding: "utf8" });
69 | }
70 |
71 | generatePackageJson();
72 | generatePublicApiTs();
73 |
74 | const mainReadmeFile = path.resolve(__dirname, "../README.md");
75 | utils.copyReadmeMd(mainReadmeFile);
76 |
--------------------------------------------------------------------------------
/UPGRADING.md:
--------------------------------------------------------------------------------
1 | # Upgrading from ng5-slider v1.x.x to ngx-slider v2.0.0
2 |
3 | v2.0.0 re-branded the slider component from ng5-slider to ngx-slider, putting it under a different NPM namespace.
4 |
5 | The upgrade process is relatively straightforward, with mostly cosmetic changes of finding "ng5" and replacing it with "ngx".
6 |
7 | This is a step-by-step guide to doing this:
8 |
9 | 1. Change the package name `ng5-slider` -> `@angular-slider/ngx-slider` in your `package.json`:
10 |
11 | Before:
12 | ```json
13 | "dependencies": {
14 | "ng5-slider": "^1.x.x",
15 | // ...
16 | }
17 | ```
18 |
19 | After:
20 | ```json
21 | "dependencies": {
22 | "@angular-slider/ngx-slider": "^2.0.0",
23 | // ...
24 | }
25 | ```
26 |
27 | 2. Run `npm install` to pull the new package.
28 |
29 | 3. Replace reference to slider module `Ng5SliderModule` -> `NgxSliderModule` in your `app.module.ts`:
30 |
31 | Before:
32 | ```typescript
33 | import { Ng5SliderModule } from 'ng5-slider';
34 |
35 | ...
36 |
37 | @NgModule({
38 | ...
39 | imports: [
40 | ...
41 | Ng5SliderModule,
42 | ...
43 | ],
44 | ...
45 | })
46 | export class AppModule {}
47 | ```
48 |
49 | After:
50 | ```typescript
51 | import { NgxSliderModule } from '@angular-slider/ngx-slider';
52 |
53 | ...
54 |
55 | @NgModule({
56 | ...
57 | imports: [
58 | ...
59 | NgxSliderModule,
60 | ...
61 | ],
62 | ...
63 | })
64 | export class AppModule {}
65 | ```
66 |
67 | 4. Rename all slider imports in your Typescript files `import ... from 'ng5-slider'` -> `import ... from '@angular-slider/ngx-slider'`:
68 |
69 | Before:
70 | ```typescript
71 | import { Options } from 'ng5-slider';
72 |
73 | ...
74 | export class MyComponent {
75 | ...
76 | options: Options = {
77 | floor: 0,
78 | ceil: 100
79 | };
80 | }
81 | ```
82 |
83 | After:
84 | ```typescript
85 | import { Options } from '@angular-slider/ngx-slider';
86 |
87 | ...
88 | export class MyComponent {
89 | ...
90 | options: Options = {
91 | floor: 0,
92 | ceil: 100
93 | };
94 | }
95 | ```
96 |
97 | 5. Rename all usages of slider directive `` -> `` in your HTML templates:
98 |
99 | Before:
100 | ```html
101 | ();
27 |
28 | const observerCallback: (event: Event) => void = (event: Event): void => {
29 | listener.events.next(event);
30 | };
31 | nativeElement.addEventListener(eventName, observerCallback, {passive: true, capture: false});
32 |
33 | listener.teardownCallback = (): void => {
34 | nativeElement.removeEventListener(eventName, observerCallback, {passive: true, capture: false});
35 | };
36 |
37 | listener.eventsSubscription = listener.events
38 | .pipe((!ValueHelper.isNullOrUndefined(throttleInterval))
39 | ? throttleTime(throttleInterval, undefined, { leading: true, trailing: true})
40 | : tap(() => {}) // no-op
41 | )
42 | .subscribe((event: Event) => {
43 | callback(event);
44 | });
45 |
46 | return listener;
47 | }
48 |
49 | public detachEventListener(eventListener: EventListener): void {
50 | if (!ValueHelper.isNullOrUndefined(eventListener.eventsSubscription)) {
51 | eventListener.eventsSubscription.unsubscribe();
52 | eventListener.eventsSubscription = null;
53 | }
54 |
55 | if (!ValueHelper.isNullOrUndefined(eventListener.events)) {
56 | eventListener.events.complete();
57 | eventListener.events = null;
58 | }
59 |
60 | if (!ValueHelper.isNullOrUndefined(eventListener.teardownCallback)) {
61 | eventListener.teardownCallback();
62 | eventListener.teardownCallback = null;
63 | }
64 | }
65 |
66 | public attachEventListener(nativeElement: any, eventName: string, callback: (event: any) => void,
67 | throttleInterval?: number): EventListener {
68 | const listener: EventListener = new EventListener();
69 | listener.eventName = eventName;
70 | listener.events = new Subject();
71 |
72 | const observerCallback: (event: Event) => void = (event: Event): void => {
73 | listener.events.next(event);
74 | };
75 |
76 | listener.teardownCallback = this.renderer.listen(nativeElement, eventName, observerCallback);
77 |
78 | listener.eventsSubscription = listener.events
79 | .pipe((!ValueHelper.isNullOrUndefined(throttleInterval))
80 | ? throttleTime(throttleInterval, undefined, { leading: true, trailing: true})
81 | : tap(() => {}) // no-op
82 | )
83 | .subscribe((event: Event) => { callback(event); });
84 |
85 | return listener;
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/src/ngx-slider/lib/slider.component.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
9 |
10 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@angular-slider/ngx-slider",
3 | "version": "21.0.0",
4 | "private": true,
5 | "description": "Self-contained, mobile friendly slider component for Angular based on angularjs-slider",
6 | "keywords": [
7 | "slider",
8 | "ui",
9 | "component",
10 | "angular",
11 | "ng",
12 | "ngx"
13 | ],
14 | "author": "Piotr Dziwinski",
15 | "license": "MIT",
16 | "repository": {
17 | "type": "git",
18 | "url": "https://github.com/angular-slider/ngx-slider.git"
19 | },
20 | "bugs": {
21 | "url": "https://github.com/angular-slider/ngx-slider/issues"
22 | },
23 | "homepage": "https://github.com/angular-slider/ngx-slider#readme",
24 | "scripts": {
25 | "prepare": "npm run prepare:lib && npm run prepare:demo-app",
26 | "prepare:lib": "node scripts/generate-lib-files.js",
27 | "prepare:demo-app": "node scripts/generate-demo-app-snippets.js && node scripts/esm/generate-demo-app-docs.mjs && node scripts/copy-assets-from-node-modules.js",
28 | "start": "npm run prepare && ng serve",
29 | "build": "npm run build:lib && npm run build:demo-app",
30 | "build:lib": "npm run prepare:lib && rimraf dist/ngx-slider && ng-packagr -p src/ngx-slider/ng-package.json && node scripts/bundle-scss.js",
31 | "build:demo-app": "npm run prepare:demo-app && rimraf dist/demo-app && ng build --configuration production --base-href /ngx-slider/",
32 | "publish-gh": "scripts/publish-gh-pages.sh",
33 | "test": "npm run prepare && ng test",
34 | "test:once": "npm run prepare && ng test --watch=false",
35 | "lint": "npm run prepare && ng lint",
36 | "e2e": "npm run prepare && playwright test",
37 | "ci": "npm run test:once && playwright test && npm run lint && npm run build:lib && npm run build:demo-app"
38 | },
39 | "dependencies": {
40 | "@angular/animations": "^21.0.0",
41 | "@angular/common": "^21.0.0",
42 | "@angular/compiler": "^21.0.0",
43 | "@angular/core": "^21.0.0",
44 | "@angular/forms": "^21.0.0",
45 | "@angular/platform-browser": "^21.0.0",
46 | "@angular/platform-browser-dynamic": "^21.0.0",
47 | "@angular/router": "^21.0.0",
48 | "@ng-bootstrap/ng-bootstrap": "^20.0.0-rc.0",
49 | "bootstrap": "^5.3.8",
50 | "bootstrap-icons": "^1.11.3",
51 | "detect-passive-events": "^2.0.3",
52 | "rxjs": "^7.8.2",
53 | "tslib": "^2.8.1",
54 | "zone.js": "~0.15.1"
55 | },
56 | "devDependencies": {
57 | "@angular-eslint/builder": "21.0.0",
58 | "@angular-eslint/eslint-plugin": "21.0.0",
59 | "@angular-eslint/eslint-plugin-template": "21.0.0",
60 | "@angular-eslint/schematics": "21.0.0",
61 | "@angular-eslint/template-parser": "21.0.0",
62 | "@angular/build": "^21.0.0",
63 | "@angular/cli": "^21.0.0",
64 | "@angular/compiler-cli": "^21.0.0",
65 | "@playwright/test": "^1.41.2",
66 | "@types/jasmine": "~5.1.13",
67 | "@types/node": "^22.10.10",
68 | "@typescript-eslint/eslint-plugin": "^8.34.1",
69 | "@typescript-eslint/parser": "^8.34.1",
70 | "@typescript-eslint/utils": "^8.34.1",
71 | "escape-html": "^1.0.3",
72 | "eslint": "^8.56.0",
73 | "jasmine-core": "~5.5.0",
74 | "jasmine-spec-reporter": "~7.0.0",
75 | "karma": "~6.4.4",
76 | "karma-chrome-launcher": "~3.2.0",
77 | "karma-coverage-istanbul-reporter": "~3.0.3",
78 | "karma-jasmine": "~5.1.0",
79 | "karma-jasmine-html-reporter": "^2.1.0",
80 | "mkdirp": "^3.0.1",
81 | "ng-packagr": "^21.0.0",
82 | "prismjs": "^1.30.0",
83 | "rimraf": "^6.1.2",
84 | "ts-node": "~10.9.2",
85 | "typedoc": "~0.28.15",
86 | "typescript": "~5.9.3"
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/src/demo-app/app/snippets/index.ts:
--------------------------------------------------------------------------------
1 | export * from './alphabet-slider/alphabet-slider.component';
2 | export * from './custom-combine-labels-function-slider/custom-combine-labels-function-slider.component';
3 | export * from './custom-display-function-slider/custom-display-function-slider.component';
4 | export * from './custom-html-display-function-slider/custom-html-display-function-slider.component';
5 | export * from './custom-legend-function-slider/custom-legend-function-slider.component';
6 | export * from './custom-scale-slider/custom-scale-slider.component';
7 | export * from './custom-ticks-legend-slider/custom-ticks-legend-slider.component';
8 | export * from './custom-ticks-legend-slider/custom-ticks-legend-slider.component';
9 | export * from './custom-ticks-slider/custom-ticks-slider.component';
10 | export * from './date-slider/date-slider.component';
11 | export * from './disabled-normalisation-slider/disabled-normalisation-slider.component';
12 | export * from './disabled-slider/disabled-slider.component';
13 | export * from './draggable-range-only-slider/draggable-range-only-slider.component';
14 | export * from './draggable-range-slider/draggable-range-slider.component';
15 | export * from './dynamic-color-selection-bar-slider/dynamic-color-selection-bar-slider.component';
16 | export * from './dynamic-options-slider/dynamic-options-slider.component';
17 | export * from './dynamic-pointer-color-slider/dynamic-pointer-color-slider.component';
18 | export * from './dynamic-tick-color-slider/dynamic-tick-color-slider.component';
19 | export * from './dynamically-created-sliders/dynamically-created-sliders.component';
20 | export * from './floating-point-slider/floating-point-slider.component';
21 | export * from './intermediate-ticks-slider/intermediate-ticks-slider.component';
22 | export * from './intermediate-ticks-values-range-slider/intermediate-ticks-values-range-slider.component';
23 | export * from './limited-range-slider/limited-range-slider.component';
24 | export * from './limited-slider/limited-slider.component';
25 | export * from './log-scale-slider/log-scale-slider.component';
26 | export * from './manual-refresh-slider/manual-refresh-slider.component';
27 | export * from './no-switching-range-slider/no-switching-range-slider.component';
28 | export * from './prevent-change-on-scroll-slider/prevent-change-on-scroll-slider.component';
29 | export * from './push-range-slider/push-range-slider.component';
30 | export * from './range-slider/range-slider.component';
31 | export * from './reactive-form-range-slider/reactive-form-range-slider.component';
32 | export * from './reactive-form-simple-slider/reactive-form-simple-slider.component';
33 | export * from './read-only-slider/read-only-slider.component';
34 | export * from './right-to-left-slider/right-to-left-slider.component';
35 | export * from './selection-bar-at-end-slider/selection-bar-at-end-slider.component';
36 | export * from './selection-bar-from-value-slider/selection-bar-from-value-slider.component';
37 | export * from './selection-bar-gradient-slider/selection-bar-gradient-slider.component';
38 | export * from './selection-bar-slider/selection-bar-slider.component';
39 | export * from './simple-slider/simple-slider.component';
40 | export * from './stepped-slider/stepped-slider.component';
41 | export * from './styled-slider/styled-slider.component';
42 | export * from './ticks-custom-tooltips-slider/ticks-custom-tooltips-slider.component';
43 | export * from './ticks-slider/ticks-slider.component';
44 | export * from './ticks-tooltips-slider/ticks-tooltips-slider.component';
45 | export * from './ticks-values-range-slider/ticks-values-range-slider.component';
46 | export * from './ticks-values-slider/ticks-values-slider.component';
47 | export * from './ticks-values-tooltips-slider/ticks-values-tooltips-slider.component';
48 | export * from './trigger-focus-slider/trigger-focus-slider.component';
49 | export * from './user-events-slider/user-events-slider.component';
50 | export * from './vertical-sliders/vertical-sliders.component';
51 |
--------------------------------------------------------------------------------
/scripts/generate-demo-app-snippets.js:
--------------------------------------------------------------------------------
1 | /*
2 | This script will go through all *.component.template.html (and *.component.title-template.html)
3 | files in snippets and generate the corresponding HTML template *.component.html, pasting the code
4 | examples in the HTML.
5 | */
6 |
7 | const fs = require('fs');
8 | const path = require('path');
9 | const escape = require('escape-html');
10 | const prism = require('prismjs');
11 | require('prismjs/components/prism-scss');
12 | require('prismjs/components/prism-typescript');
13 |
14 | const utils = require('./utils.js');
15 |
16 | /** Generate template for a single file */
17 | function generateTemplate(templateFile, snippetsDir) {
18 | const titleTemplateFile = templateFile.replace('.template.html', '.title-template.html');
19 | const sectionIdTemplateFile = templateFile.replace('.template.html', '.id-template.html');
20 | const outputTemplateFile = templateFile.replace('.template.html', '.html');
21 | const codeFile = templateFile.replace('.template.html', '.ts');
22 | const styleFile = templateFile.replace('.template.html', '.scss');
23 |
24 | const titleTemplateFileContent = fs.readFileSync(path.resolve(snippetsDir, titleTemplateFile), { encoding: 'utf8' }).trim();
25 | const sectionIdTemplateFileContent = fs.readFileSync(path.resolve(snippetsDir, sectionIdTemplateFile), { encoding: 'utf8' }).trim();
26 |
27 | const templateFileContent = fs.readFileSync(path.resolve(snippetsDir, templateFile), { encoding: 'utf8' });
28 | const templateNavHtml = navHtml(path.basename(outputTemplateFile), templateFileContent, 'html');
29 |
30 | let codeFileContent = fs.readFileSync(path.resolve(snippetsDir, codeFile), { encoding: 'utf8' });
31 | // The only modification to the source file is to remove the @local prefix from slider import
32 | codeFileContent = codeFileContent.replace(/@local\/ngx-slider/g, "@angular-slider/ngx-slider");
33 | const codeNavHtml = navHtml(path.basename(codeFile), codeFileContent, 'typescript');
34 |
35 | let styleNavHtml = '';
36 | if (fs.existsSync(path.resolve(snippetsDir, styleFile))) {
37 | const styleFileContent = fs.readFileSync(path.resolve(snippetsDir, styleFile), { encoding: 'utf8' });
38 | styleNavHtml = navHtml(path.basename(styleFile), styleFileContent, 'scss');
39 | }
40 | const fileNameAndPath = process.platform === "win32" ? templateFile.split('\\') : templateFile.split('/');
41 | const fileName = fileNameAndPath[fileNameAndPath.length -1];
42 | const navName = fileName.replace(/-/g,'').replace('.component','').replace('.template.html', 'Nav');
43 |
44 | const outputHtmlFileContent = `
45 |
76 | ${escape(tabTitle)}
77 |
78 |
80 | `;
81 | }
82 |
83 |
84 | const snippetsDir = path.resolve(__dirname, '../src/demo-app/app/snippets');
85 |
86 | const templateFiles = utils.readdirRecursivelySync(snippetsDir)
87 | .filter((file) => file.endsWith('component.template.html'));
88 |
89 | for (let templateFile of templateFiles) {
90 | generateTemplate(templateFile, snippetsDir)
91 | }
92 |
--------------------------------------------------------------------------------
/typedoc/README.md:
--------------------------------------------------------------------------------
1 | ## Introduction
2 |
3 | These pages are generated from source code of ngx-slider using Typedoc.
4 |
5 | Below, you will find an overview of using the slider directive, and following the navigation links, you can explore the public API portion of the library.
6 |
7 | The public API is made up of all declarations made available when importing the `ngx-slider` package, for instance the `Options` class:
8 | ```ts
9 | import { Options } from '@angular-slider/ngx-slider';
10 | ```
11 |
12 | ## Slider directive
13 |
14 | The slider component takes the following inputs and outputs:
15 | ```html
16 |
{{content}}
17 |
3 |
28 |
29 |
53 |
4 |
27 |
5 |
26 |
6 | 
7 |
8 |
9 |
7 |
10 |
25 | ngx-slider
11 | 12 | @if (enableExternalImages) { 13 | Fork me on GitHub 18 | } 19 | 20 |Self-contained, mobile-friendly slider component for Angular based on angularjs-slider
21 |@if (enableExternalImages) {
22 | 
23 | }
2 |
52 |
--------------------------------------------------------------------------------
/src/ngx-slider/lib/value-helper.spec.ts:
--------------------------------------------------------------------------------
1 | import { ValueHelper } from './value-helper';
2 | import { CustomStepDefinition } from './options';
3 |
4 | const precision: number = 0.0001;
5 |
6 | describe('ValueHelper', () => {
7 | describe('linearValueToPosition', () => {
8 | it('converts using linear interpolation', () => {
9 | const number: number = 55;
10 | const minValue: number = 0;
11 | const maxValue: number = 100;
12 | expect(ValueHelper.linearValueToPosition(number, minValue, maxValue)).toBeCloseTo(0.55, precision);
13 | });
14 | });
15 |
16 | describe('linearPositionToValue', () => {
17 | it('converts using linear interpolation', () => {
18 | const percent: number = 0.55;
19 | const minValue: number = 0;
20 | const maxValue: number = 100;
21 | expect(ValueHelper.linearPositionToValue(percent, minValue, maxValue)).toBeCloseTo(55, precision);
22 | });
23 | });
24 |
25 | describe('logValueToPosition', () => {
26 | it('converts using log scale', () => {
27 | const number: number = 1e2;
28 | const minValue: number = 1e0;
29 | const maxValue: number = 1e10;
30 | expect(ValueHelper.logValueToPosition(number, minValue, maxValue)).toBeCloseTo(0.2, precision);
31 | });
32 | });
33 |
34 | describe('logPositionToValue', () => {
35 | it('converts using log scale', () => {
36 | const percent: number = 0.2;
37 | const minValue: number = 1e0;
38 | const maxValue: number = 1e10;
39 | expect(ValueHelper.logPositionToValue(percent, minValue, maxValue)).toBeCloseTo(1e2, precision);
40 | });
41 | });
42 |
43 | describe('findStepIndex', () => {
44 | it('finds the first equal index if value is equal', () => {
45 | const stepArray: CustomStepDefinition[] = [
46 | {
47 | value: 1
48 | },
49 | {
50 | value: 2
51 | },
52 | {
53 | value: 3
54 | }
55 | ];
56 |
57 | expect(ValueHelper.findStepIndex(1, stepArray)).toEqual(0);
58 | expect(ValueHelper.findStepIndex(2, stepArray)).toEqual(1);
59 | expect(ValueHelper.findStepIndex(3, stepArray)).toEqual(2);
60 | });
61 |
62 | it('finds the closest index if value is not equal', () => {
63 | const stepArray: CustomStepDefinition[] = [
64 | {
65 | value: 10
66 | },
67 | {
68 | value: 20
69 | },
70 | {
71 | value: 30
72 | }
73 | ];
74 |
75 | expect(ValueHelper.findStepIndex(9, stepArray)).toEqual(0);
76 | expect(ValueHelper.findStepIndex(11, stepArray)).toEqual(0);
77 | expect(ValueHelper.findStepIndex(15, stepArray)).toEqual(0);
78 |
79 | expect(ValueHelper.findStepIndex(16, stepArray)).toEqual(1);
80 | expect(ValueHelper.findStepIndex(19, stepArray)).toEqual(1);
81 | expect(ValueHelper.findStepIndex(21, stepArray)).toEqual(1);
82 | expect(ValueHelper.findStepIndex(25, stepArray)).toEqual(1);
83 |
84 | expect(ValueHelper.findStepIndex(26, stepArray)).toEqual(2);
85 | expect(ValueHelper.findStepIndex(29, stepArray)).toEqual(2);
86 | expect(ValueHelper.findStepIndex(31, stepArray)).toEqual(2);
87 | });
88 | });
89 | });
90 |
--------------------------------------------------------------------------------
/KNOWN_ISSUES.md:
--------------------------------------------------------------------------------
1 | # Known issues
2 |
3 | ## Slider is not refreshing when used in a dynamic component
4 |
5 | 2019-06-11 UPDATE: This issue is now resolved on newest browser versions which support [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). At this time it is Chrome >= 64 and Opera >= 51. For other browsers, or older browser versions, the workaround below still applies.
6 |
7 | If you use slider in a dynamic component (e.g. pop-up dialog shown on user action), then the slider may not be shown properly on first render. You may see the slider elements being stacked together like so:
8 | 
9 |
10 | This is a known problem which comes from the way DOM updates are published (or more precisely not published) as changes visible to Angular components.
11 |
12 | The workaround is to use `manualRefresh` input to the slider, and trigger the manual refresh when the slider is shown for the first time.
13 |
14 | Please refer to [manual refresh demo](https://angular-slider.github.io/ngx-slider/demos#manual-refresh-slider) for an example of how to use it.
15 |
16 | ## Rendering performance
17 |
18 | When using multiple instances of slider on single page, the first page render will likely take a longer time to complete.
19 |
20 | This is caused by the slider initialisation code, which waits for the first render of its elements before it can determine their bounds and then re-position them as necessary.
21 |
22 | There is no easy way to solve this other than re-writing the rendering code. This is closely related to the problem with Angular Universal described below. However, if the use-case is simple enough, there is a workaround available which could help - see the discussion on [issue #45](https://github.com/angular-slider/ngx-slider/issues/45) for details.
23 |
24 | ## Compatibility with Angular Universal
25 |
26 | The slider component is currently strictly tied to browser environment, because it positions its elements based on current geometry of its elements in browser window. This makes it incompatible with Angular Universal.
27 |
28 | Unfortunately, there is no easy fix for this, other than re-writing all of the layouting code in the slider, and applying style changes through CSS. For more detailed explanation and discussion, please see [issue #66](https://github.com/angular-slider/ngx-slider/issues/66).
29 |
30 | Therefore, for the present and near future, Angular Universal will not be supported.
31 |
32 | ## Using CSS transform: scale makes slider render incorrectly
33 |
34 | Using `transform : scale(N)` in css will mess with the calculation of the slider. You can workaround this by setting the scale in ngx-slider options as the opposite value of the scale set in css. [See Issue.](https://github.com/angular-slider/ngx-slider/issues/367)
35 |
36 | ## Compatibility with Angular's recommended Content Security Policy (CSP)
37 |
38 | Ngx-Slider makes use of innerHTML which means that sites that make use of a Content Security Policy (CSP) throw an exceptions. To fix this you can set the value of the `AllowUnsafeHtmlInSlider` provider in your app.module to `false`. Note that this will prevent you from customizing labels using HTML.
39 |
--------------------------------------------------------------------------------
/src/demo-app/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy, HostBinding, inject } from '@angular/core';
2 | import { ActivatedRoute, Router, Event, NavigationEnd } from '@angular/router';
3 |
4 | @Component({
5 | selector: 'app-root',
6 | templateUrl: './app.component.html',
7 | styleUrls: ['./app.component.scss'],
8 | standalone: false
9 | })
10 | export class AppComponent implements OnInit, OnDestroy {
11 | private route = inject(ActivatedRoute);
12 | private router = inject(Router);
13 |
14 | private static REDIRECT_IDS: string[] = [
15 | 'simple-slider',
16 | 'range-slider',
17 | 'styled-slider',
18 | 'limited-slider',
19 | 'limited-range-slider',
20 | 'no-switching-range-slider',
21 | 'push-range-slider',
22 | 'selection-bar-slider',
23 | 'selection-bar-at-end-slider',
24 | 'selection-bar-from-value-slider',
25 | 'selection-bar-gradient-slider',
26 | 'dynamic-color-selection-bar-slider',
27 | 'dynamic-pointer-color-slider',
28 | 'stepped-slider',
29 | 'right-to-left-slider',
30 | 'floating-point-slider',
31 | 'custom-display-function-slider',
32 | 'custom-combine-labels-function-slider',
33 | 'custom-html-display-function-slider',
34 | 'alphabet-slider',
35 | 'date-slider',
36 | 'ticks-slider',
37 | 'intermediate-ticks-slider',
38 | 'custom-ticks-slider',
39 | 'custom-ticks-legend-slider',
40 | 'custom-legend-function-slider',
41 | 'ticks-tooltips-slider',
42 | 'ticks-custom-tooltips-slider',
43 | 'ticks-values-tooltips-slider',
44 | 'ticks-values-range-slider',
45 | 'intermediate-ticks-values-range-slider',
46 | 'dynamic-tick-color-slider',
47 | 'log-scale-slider',
48 | 'custom-scale-slider',
49 | 'draggable-range-slider',
50 | 'draggable-range-only-slider',
51 | 'disabled-slider',
52 | 'read-only-slider',
53 | 'vertical-sliders',
54 | 'user-events-slider',
55 | 'manual-refresh-slider'
56 | ];
57 |
58 | @HostBinding('class.test-mode')
59 | testMode: boolean = false;
60 |
61 | private queryParamsSub: any;
62 | private fragmentSub: any;
63 | private eventsSub: any;
64 |
65 | ngOnInit(): void {
66 | this.queryParamsSub = this.route.queryParams.subscribe((params: any): void => {
67 | this.testMode = params['testMode'] === 'true';
68 | });
69 |
70 | // Provide redirects for old site links
71 | this.fragmentSub = this.route.fragment.subscribe((fragment: string) => {
72 | if (this.route.snapshot.url.length === 0 && AppComponent.REDIRECT_IDS.indexOf(fragment) !== -1) {
73 | this.router.navigateByUrl('/demos#' + fragment);
74 | }
75 | });
76 |
77 | this.eventsSub = this.router.events.subscribe((event: Event) => {
78 | if (event instanceof NavigationEnd) {
79 | const { fragment } = this.router.parseUrl(this.router.url);
80 | if (fragment !== undefined && fragment !== null) {
81 | const element: Element = document.querySelector(`#${fragment}`);
82 | if (element !== undefined && element !== null) {
83 | element.scrollIntoView();
84 | }
85 | } else {
86 | window.scrollTo(0, 0);
87 | }
88 | }
89 | });
90 | }
91 |
92 | ngOnDestroy(): void {
93 | this.queryParamsSub.unsubscribe();
94 | this.fragmentSub.unsubscribe();
95 | this.eventsSub.unsubscribe();
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/src/ngx-slider/lib/event-listener-helper.ts:
--------------------------------------------------------------------------------
1 | import { Renderer2 } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 | import { throttleTime, tap } from 'rxjs/operators';
4 | import { supportsPassiveEvents } from 'detect-passive-events';
5 |
6 | import { EventListener } from './event-listener';
7 | import { ValueHelper } from './value-helper';
8 |
9 | /**
10 | * Helper class to attach event listeners to DOM elements with debounce support using rxjs
11 | */
12 | export class EventListenerHelper {
13 | constructor(private renderer: Renderer2) {
14 | }
15 |
16 | public attachPassiveEventListener(nativeElement: any, eventName: string, callback: (event: any) => void,
17 | throttleInterval?: number): EventListener {
18 | // Only use passive event listeners if the browser supports it
19 | if (supportsPassiveEvents !== true) {
20 | return this.attachEventListener(nativeElement, eventName, callback, throttleInterval);
21 | }
22 |
23 | // Angular doesn't support passive event handlers (yet), so we need to roll our own code using native functions
24 | const listener: EventListener = new EventListener();
25 | listener.eventName = eventName;
26 | listener.events = new Subject${titleTemplateFileContent} 46 | 47 |
48 |
49 |
`;
64 |
65 | fs.writeFileSync(path.resolve(snippetsDir, outputTemplateFile), utils.escapeAtForAngular(outputHtmlFileContent), { encoding: 'utf8' });
66 | }
67 |
68 | /** Generate highlighted source code using prism */
69 | function highlight(code, lang) {
70 | return prism.highlight(code.trim(), prism.languages[lang]);
71 | }
72 |
73 | /** Common HTML template for tab */
74 | function navHtml(tabTitle, codeContent, codeLang) {
75 | return `
50 |
63 |
51 | ${templateFileContent}
52 |
53 |
54 |
61 |
62 | ${utils.escapeBracesForAngular(highlight(codeContent, codeLang))}