### Start Development Environment

Source: https://github.com/tb/ng2-nouislider/blob/master/README.md

Commands to initialize the development environment.

```bash
corepack enable
pnpm i
pnpm start
```

--------------------------------

### Install ng2-nouislider

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Install the package and its peer dependency via npm.

```bash
npm install nouislider ng2-nouislider
```

--------------------------------

### Install ng2-nouislider

Source: https://github.com/tb/ng2-nouislider/blob/master/README.md

Install the package via npm. Requires Angular 14 or higher.

```bash
npm i nouislider ng2-nouislider
```

--------------------------------

### Advanced Configuration with Config Object

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Use a configuration object to set advanced noUiSlider options like pips, behavior, margin, and limit. This example demonstrates setting up a slider with custom range, limits, and pip display.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-config-example',
  template: `
    <nouislider
      [config]="sliderConfig"
      [limit]="10"
      [(ngModel)]="range"
      style="margin-bottom: 5rem">
    </nouislider>
    <p>Value: {{ range | json }}</p>
  `
})
export class ConfigExampleComponent {
  range: number[] = [10, 15];

  sliderConfig: any = {
    behaviour: 'drag',
    connect: true,
    margin: 1,
    limit: 5,
    range: {
      min: 0,
      max: 20
    },
    pips: {
      mode: 'steps',
      density: 5
    }
  };
}
```

--------------------------------

### Implement Full Nouislider Component

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Example demonstrating the usage of various input properties within an Angular component template.

```typescript
// Example usage with all properties
@Component({
  template: `
    <nouislider
      [min]="0"
      [max]="100"
      [step]="5"
      [connect]="true"
      [disabled]="false"
      [behaviour]="'drag'"
      [limit]="50"
      [snap]="false"
      [animate]="true"
      [keyboard]="true"
      [pageSteps]="10"
      [tooltips]="[true, true]"
      [format]="customFormatter"
      [config]="advancedConfig"
      [(ngModel)]="value">
    </nouislider>
  `
})
export class FullExampleComponent {
  value: number[] = [20, 80];
  customFormatter = new DefaultFormatter();
  advancedConfig = { /* additional noUiSlider options */ };
}
```

--------------------------------

### Subscribe to Slider Events

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Bind to various slider lifecycle events like start, slide, change, update, set, and end to track user interactions.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-events-example',
  template: `
    <nouislider
      [min]="0"
      [max]="100"
      [step]="1"
      [(ngModel)]="value"
      (start)="onStart($event)"
      (slide)="onSlide($event)"
      (change)="onChange($event)"
      (update)="onUpdate($event)"
      (set)="onSet($event)"
      (end)="onEnd($event)">
    </nouislider>
    <div>
      <p>Value: {{ value }}</p>
      <p>Last event: {{ lastEvent }}</p>
    </div>
  `
})
export class EventsExampleComponent {
  value: number = 50;
  lastEvent: string = 'none';

  onStart(value: number): void {
    this.lastEvent = `start: ${value}`;
    console.log('Slider interaction started:', value);
  }

  onSlide(value: number): void {
    this.lastEvent = `slide: ${value}`;
    // Called continuously while sliding
  }

  onChange(value: number): void {
    this.lastEvent = `change: ${value}`;
    console.log('Value changed by user interaction:', value);
  }

  onUpdate(value: number): void {
    this.lastEvent = `update: ${value}`;
    // Called when value updates (including programmatic changes)
  }

  onSet(value: number): void {
    this.lastEvent = `set: ${value}`;
    console.log('Value was set:', value);
  }

  onEnd(value: number): void {
    this.lastEvent = `end: ${value}`;
    console.log('Slider interaction ended:', value);
  }
}
```

--------------------------------

### Angular CLI Help

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/ng2-nouislider/README.md

Access comprehensive help and documentation for the Angular CLI. This command provides an overview and reference for all available CLI commands.

```bash
ng help
```

--------------------------------

### Implement Range Slider

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/demo/src/app/app.component.html

Configuring the slider for range selection using the connect property.

```html
<nouislider [connect]="true" [min]="0" [max]="15" [step]="1" [(ngModel)]="someRange" (ngModelChange)="onChange($event)"></nouislider>
```

--------------------------------

### Implement Keyboard Support

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/demo/src/app/app.component.html

Enabling keyboard navigation for slider handles via configuration.

```typescript
someKeyboardConfig: any = {
  behaviour: 'drag',
  connect: true,
  start: [0, 5],
  keyboard: true,  // same as [keyboard]="true"
  step: 0.1,
  pageSteps: 10,  // number of page steps, defaults to 10
  range: {
    min: 0,
    max: 5
  },
  pips: {
    mode: 'count',
    density: 2,
    values: 6,
    stepped: true
  }
};

<nouislider [config]="someKeyboardConfig" [(ngModel)]="someKeyboard"></nouislider>
```

--------------------------------

### Build Ng2Nouislider Project

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/ng2-nouislider/README.md

Execute this command to build the ng2-nouislider library. The compiled output will be located in the `dist/` directory.

```bash
ng build ng2-nouislider
```

--------------------------------

### Implement Tooltips

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/demo/src/app/app.component.html

Adding tooltips to slider handles using the tooltips input.

```html
<nouislider[min]="0" [max]="10" [step]="0.05" [(ngModel)]="someRange3" [tooltips]="[ false, true ]" style="margin-top: 4em;"></nouislider>
```

--------------------------------

### Run Unit Tests for Ng2Nouislider

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/ng2-nouislider/README.md

This command executes the unit tests for the ng2-nouislider project using Karma. View test results in your console.

```bash
ng test ng2-nouislider
```

--------------------------------

### Configure Range Slider with Options

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/demo/src/app/app.component.html

Defining a configuration object for the slider, including pips and behavior settings.

```typescript
someRange2config: any = {
  behaviour: 'drag',
  connect: true,
  margin: 1,
  limit: 5, // NOTE: overwritten by [limit]="10"
  range: {
    min: 0,
    max: 20
  },
  pips: {
    mode: 'steps',
    density: 5
  }
};

<nouislider [config]="someRange2config" [limit]="10" [(ngModel)]="someRange2"></nouislider>
```

--------------------------------

### Publish Ng2Nouislider to npm

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/ng2-nouislider/README.md

After building the library, navigate to the distribution folder and use this command to publish the ng2-nouislider package to npm. Ensure you are in the correct directory (`dist/ng2-nouislider`).

```bash
npm publish
```

--------------------------------

### Include Nouislider Styles

Source: https://github.com/tb/ng2-nouislider/blob/master/README.md

Import the required CSS file for the slider.

```css
@import "nouislider/dist/nouislider.css";
```

--------------------------------

### Generate Component for Ng2Nouislider

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/ng2-nouislider/README.md

Use this command to generate a new component specifically for the ng2-nouislider project. Ensure the `--project` flag is set correctly to avoid adding it to the default project.

```bash
ng generate component component-name --project ng2-nouislider
```

--------------------------------

### Implement NouiFormatter Interface

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Create custom formatters by implementing the NouiFormatter interface to control how slider values are displayed and parsed.

```typescript
import { NouiFormatter } from 'ng2-nouislider';

// Interface definition
interface NouiFormatter {
  to(value: number): string;   // Convert number to display string
  from(value: string): number; // Convert display string back to number
}

// Currency formatter example
export class CurrencyFormatter implements NouiFormatter {
  to(value: number): string {
    return '$' + value.toFixed(2);
  }

  from(value: string): number {
    return parseFloat(value.replace('$', ''));
  }
}

// Percentage formatter example
export class PercentFormatter implements NouiFormatter {
  to(value: number): string {
    return value.toFixed(0) + '%';
  }

  from(value: string): number {
    return parseFloat(value.replace('%', ''));
  }
}
```

--------------------------------

### nouislider Component Inputs

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Reference for all available input properties for the <nouislider> component.

```APIDOC
## Component Input Properties

### Description
List of available input properties for the <nouislider> component to configure slider behavior and appearance.

### Parameters
- **min** (number) - Minimum slider value
- **max** (number) - Maximum slider value
- **step** (number) - Step increment
- **connect** (boolean | boolean[]) - Connect handles with bar
- **disabled** (boolean) - Disable the slider
- **behaviour** (string) - Interaction behaviour ('drag', 'tap', etc.)
- **limit** (number) - Maximum distance between handles
- **snap** (boolean) - Snap to steps
- **animate** (boolean | boolean[]) - Animation on value change
- **range** (object) - Custom range with non-linear steps
- **format** (NouiFormatter) - Value formatter
- **pageSteps** (number) - Steps for Page Up/Down keys
- **keyboard** (boolean) - Enable keyboard navigation
- **onKeydown** (Function) - Custom keyboard handler
- **tooltips** (Array<boolean | NouiFormatter>) - Tooltip configuration
- **config** (object) - Full noUiSlider configuration object

### Request Example
<nouislider
  [min]="0"
  [max]="100"
  [step]="5"
  [connect]="true"
  [(ngModel)]="value">
</nouislider>
```

--------------------------------

### Import NouisliderModule

Source: https://github.com/tb/ng2-nouislider/blob/master/README.md

Import the module into your Angular application.

```typescript
import { NouisliderModule } from 'ng2-nouislider';
```

--------------------------------

### Implement Custom Keyboard Handler

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Override default keyboard navigation by providing a custom onKeydown handler in the slider configuration. Ensure the handler prevents default browser behavior when necessary.

```typescript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-keyboard',
  template: `
    <nouislider
      [config]="keyboardConfig"
      [(ngModel)]="value"
      style="margin-bottom: 5rem">
    </nouislider>
    <p>Value: {{ value | json }}</p>
  `
})
export class CustomKeyboardComponent implements OnInit {
  value: number[] = [1, 3];
  keyboardConfig: any;

  ngOnInit(): void {
    this.keyboardConfig = {
      behaviour: 'drag',
      connect: true,
      keyboard: true,
      step: 0.1,
      range: { min: 0, max: 5 },
      onKeydown: this.customKeyHandler
    };
  }

  customKeyHandler = (e: KeyboardEvent): void => {
    const index = parseInt(
      (e.target as HTMLElement).getAttribute('data-handle') as string
    );

    let multiplier = 0;
    const stepSize = 0.1;

    switch (e.key) {
      case 'ArrowDown':
      case 'ArrowLeft':
        multiplier = -2; // Custom: move 2x step backwards
        e.preventDefault();
        break;
      case 'ArrowUp':
      case 'ArrowRight':
        multiplier = 3; // Custom: move 3x step forwards
        e.preventDefault();
        break;
    }

    const delta = multiplier * stepSize;
    const newValue = [...this.value];
    newValue[index] += delta;
    this.value = newValue;
  };
}
```

--------------------------------

### Enable Keyboard Navigation for Accessibility

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Enable keyboard navigation for the slider using the `keyboard: true` configuration option. This allows users to adjust slider values using arrow keys, Page Up, and Page Down for enhanced accessibility.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-keyboard-example',
  template: `
    <nouislider
      [config]="keyboardConfig"
      [(ngModel)]="value"
      (keydown)="onKeydown($event)"
      style="margin-bottom: 5rem">
    </nouislider>
    <p>Value: {{ value | json }}</p>
    <p>Use arrow keys to adjust, Page Up/Down for larger steps</p>
  `
})
export class KeyboardExampleComponent {
  value: number[] = [1, 4];

  keyboardConfig: any = {
    behaviour: 'drag',
    connect: true,
    keyboard: true,
    step: 0.1,
    pageSteps: 10, // Number of steps for Page Up/Down
    range: {
      min: 0,
      max: 5
    },
    pips: {
      mode: 'count',
      density: 2,
      values: 6,
      stepped: true
    }
  };

  onKeydown(event: KeyboardEvent): void {
    console.log('Key pressed:', event.key);
  }
}
```

--------------------------------

### Implement Custom Keyboard Handler

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/demo/src/app/app.component.html

Overriding the default keyboard event handler with a custom implementation.

```typescript
@ViewChild('someKeyboardSlider2') someKeyboardSlider2: NouisliderComponent;

public someKeyboard2: number[] = [1, 3];

private someKeyboard2EventHandler = (e: KeyboardEvent) => {
  console.log("overridden keyboard handler");

  // determine which handle triggered the event
  let index = parseInt((<HTMLElement>e.target).getAttribute('data-handle'));

  let multiplier: number = 0;
  let stepSize = 0.1;

  switch ( e.which ) {
    case 40:  // ArrowDown
    case 37:  // ArrowLeft
      multiplier = -2;
      e.preventDefault();
      break;

    case 38:  // ArrowUp
    case 39:  // ArrowRight
      multiplier = 3;
      e.preventDefault();
      break;

    default:
      break;
  }

  let delta = multiplier * stepSize;
  let newValue = [].concat(this.someKeyboard2);
  newValue[index] += delta;
  this.someKeyboard2 = newValue;
}

public someKeyboardConfig2: any = {
  // ...

  keyboard: true,
  onKeydown: this.someKeyboard2EventHandler
}

<nouislider [config]="someKeyboardConfig2" [(ngModel)]="someKeyboard2" ></nouislider>
```

--------------------------------

### Implement Range Slider

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Create a slider with two handles by binding to an array.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-range-example',
  template: `
    <nouislider
      [connect]="true"
      [min]="0"
      [max]="100"
      [step]="5"
      [(ngModel)]="range"
      (ngModelChange)="onRangeChange($event)">
    </nouislider>
    <p>Selected range: {{ range[0] }} - {{ range[1] }}</p>
  `
})
export class RangeExampleComponent {
  range: number[] = [20, 80];

  onRangeChange(newRange: number[]): void {
    console.log('Range changed:', newRange);
  }
}
```

--------------------------------

### Display Tooltips on Slider Handles

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Configure tooltips to display above slider handles. You can choose to show tooltips on all handles or selectively on specific ones by passing an array of booleans to the `tooltips` input.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-tooltips-example',
  template: `
    <!-- Show tooltip only on second handle -->
    <nouislider
      [min]="0"
      [max]="100"
      [step]="1"
      [(ngModel)]="range"
      [tooltips]="[false, true]"
      style="margin-top: 3rem">
    </nouislider>

    <!-- Show tooltips on all handles -->
    <nouislider
      [min]="0"
      [max]="100"
      [step]="1"
      [(ngModel)]="singleValue"
      [tooltips]="[true]"
      style="margin-top: 3rem">
    </nouislider>
  `
})
export class TooltipsExampleComponent {
  range: number[] = [20, 80];
  singleValue: number = 50;
}
```

--------------------------------

### Custom Time Formatter for Slider Values

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Implement a custom formatter to display slider values in a specific format, such as time. The `TimeFormatter` class implements the `NouiFormatter` interface, providing `to` and `from` methods for value conversion.

```typescript
import { Component } from '@angular/core';
import { NouiFormatter } from 'ng2-nouislider';

export class TimeFormatter implements NouiFormatter {
  to(value: number): string {
    const h = Math.floor(value / 3600);
    const m = Math.floor((value % 3600) / 60);
    const s = Math.floor(value - 60 * m - 3600 * h);
    const pad = (n: number) => n.toString().padStart(2, '0');
    return `${pad(h)}:${pad(m)}:${pad(s)}`;
  }

  from(value: string): number {
    const [h, m, s] = value.split(':').map(Number);
    return h * 3600 + m * 60 + s;
  }
}

@Component({
  selector: 'app-formatter-example',
  template: `
    <nouislider
      [config]="timeConfig"
      [(ngModel)]="timeValue"
      style="margin-bottom: 5rem">
    </nouislider>
    <p>Seconds: {{ timeValue }}</p>
  `
})
export class FormatterExampleComponent {
  timeValue: number = 43200; // 12:00:00 in seconds

  timeConfig: any = {
    range: {
      min: 0,
      max: 86399 // 23:59:59 in seconds
    },
    tooltips: new TimeFormatter(),
    step: 1
  };
}
```

--------------------------------

### Generate Other Angular Schematics

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/ng2-nouislider/README.md

This command allows generating various Angular artifacts like directives, pipes, services, classes, guards, interfaces, enums, or modules within the ng2-nouislider project. Always specify the project to maintain correct project structure.

```bash
ng generate directive|pipe|service|class|guard|interface|enum|module --project ng2-nouislider
```

--------------------------------

### Implement Single Value Slider

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/demo/src/app/app.component.html

Basic usage of the nouislider component with ngModel binding.

```html
<nouislider [min]="someMin" [max]="someLimit" [step]="someStep" [(ngModel)]="someValue" (ngModelChange)="onChange($event)" [disabled]="disabled"></nouislider>
```

--------------------------------

### Implement Range Slider in Reactive Form

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/demo/src/app/app.component.html

Using a range slider within an Angular reactive form group.

```html
<form [formGroup]="form2">
  <nouislider [min]="0" [max]="20" [step]="1" [formControl]="form2.controls.range"></nouislider>
</form>
```

--------------------------------

### Update Slider Configuration Dynamically

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Modify slider properties like min, max, and step at runtime by binding them to component variables.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-example',
  template: `
    <nouislider
      [min]="min"
      [max]="max"
      [step]="step"
      [(ngModel)]="value">
    </nouislider>

    <div>
      <p>Value: {{ value }}, Min: {{ min }}, Max: {{ max }}, Step: {{ step }}</p>

      <button (click)="min = min - 10">Min -10</button>
      <button (click)="min = min + 10">Min +10</button>
      <button (click)="max = max - 10">Max -10</button>
      <button (click)="max = max + 10">Max +10</button>
      <button (click)="step = step + 1">Step +1</button>
    </div>
  `
})
export class DynamicExampleComponent {
  value: number = 50;
  min: number = 0;
  max: number = 100;
  step: number = 1;
}
```

--------------------------------

### Use Nouislider in Reactive Forms

Source: https://github.com/tb/ng2-nouislider/blob/master/README.md

Integrate the slider with Angular reactive forms using form controls.

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

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

--------------------------------

### Implement Single Value Slider

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Create a slider with one handle using ngModel for data binding.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <nouislider
      [min]="0"
      [max]="100"
      [step]="1"
      [(ngModel)]="value"
      (ngModelChange)="onValueChange($event)">
    </nouislider>
    <p>Current value: {{ value }}</p>
  `
})
export class ExampleComponent {
  value: number = 50;

  onValueChange(newValue: number): void {
    console.log('Slider value changed to:', newValue);
  }
}
```

--------------------------------

### Implement Single Value Slider in Reactive Form

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/demo/src/app/app.component.html

Using the nouislider component within an Angular reactive form group.

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

--------------------------------

### Manage Disabled State

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Control the disabled state via the disabled input or reactive form controls.

```typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-disabled-example',
  template: `
    <!-- Template-driven disabled -->
    <nouislider
      [min]="0"
      [max]="100"
      [(ngModel)]="value"
      [disabled]="isDisabled">
    </nouislider>
    <button (click)="isDisabled = !isDisabled">Toggle Disabled</button>

    <!-- Reactive forms disabled -->
    <form [formGroup]="form">
      <nouislider
        [min]="0"
        [max]="10"
        [step]="1"
        [formControl]="form.controls.slider">
      </nouislider>
    </form>
    <button (click)="toggleFormDisabled()">Toggle Form Disabled</button>
  `
})
export class DisabledExampleComponent {
  value: number = 50;
  isDisabled: boolean = false;
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({ slider: [5] });
  }

  toggleFormDisabled(): void {
    const control = this.form.controls['slider'];
    control.enabled ? control.disable() : control.enable();
  }
}
```

--------------------------------

### Define Nouislider Input Interface

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Interface definition outlining the available input properties for the nouislider component.

```typescript
// All available inputs on <nouislider> component
interface NouisliderInputs {
  min: number;              // Minimum slider value
  max: number;              // Maximum slider value
  step: number;             // Step increment
  connect: boolean | boolean[]; // Connect handles with bar
  disabled: boolean;        // Disable the slider
  behaviour: string;        // Interaction behaviour ('drag', 'tap', etc.)
  limit: number;            // Maximum distance between handles
  snap: boolean;            // Snap to steps
  animate: boolean | boolean[]; // Animation on value change
  range: object;            // Custom range with non-linear steps
  format: NouiFormatter;    // Value formatter
  pageSteps: number;        // Steps for Page Up/Down keys
  keyboard: boolean;        // Enable keyboard navigation
  onKeydown: Function;      // Custom keyboard handler
  tooltips: Array<boolean | NouiFormatter>; // Tooltip configuration
  config: object;           // Full noUiSlider configuration object
}
```

--------------------------------

### Integrate with Reactive Forms

Source: https://context7.com/tb/ng2-nouislider/llms.txt

Use the slider component within a FormGroup using formControl.

```typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="form">
      <nouislider
        [min]="0"
        [max]="20"
        [step]="0.5"
        [formControl]="form.controls.single">
      </nouislider>
      <p>Form value: {{ form.value | json }}</p>

      <nouislider
        [connect]="true"
        [min]="0"
        [max]="100"
        [step]="1"
        [formControl]="form.controls.range">
      </nouislider>
    </form>
  `
})
export class ReactiveFormComponent {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      single: [10],
      range: [[25, 75]]
    });
  }
}
```

--------------------------------

### Use ngModel with Nouislider

Source: https://github.com/tb/ng2-nouislider/blob/master/README.md

Bind the slider value using ngModel.

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

--------------------------------

### Disable Slider Control in Reactive Forms

Source: https://github.com/tb/ng2-nouislider/blob/master/projects/demo/src/app/app.component.html

Toggling the disabled state of a slider control within a reactive form.

```html
<form [formGroup]="form3">
  <nouislider [min]="0" [max]="10" [step]="1" [formControl]="form3.controls.single"></nouislider>
</form>
```

```typescript
  toggleDisabled() {
    this.disabled = !this.disabled;
    this.disabled ? this.form3.controls.single.disable() : this.form3.controls.single.enable();
  }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.