range-selection-input

v15.0.3

Published

9 days ago

This is an Angular Module containing Components/Services using Material

0High
0Medium
0Low

wavecoders

Range Selection Input Component

Overview

The range-selection-input library provides a Material Design slider component that allows users to select numeric values or ranges through an intuitive draggable interface. It supports both single value sliders and dual-thumb range selection, configurable min/max values, step divisions, tick marks, and display formatting. Built with Angular Material slider components and implementing ControlValueAccessor for seamless form integration.

Core Capabilities

🎚️ Numeric Range Selection Interface

Single Value Selection: Select one numeric value using a single thumb slider
Dual Range Selection: Select a range using dual thumbs with minimum and maximum values
Configurable Range: Set minimum, maximum, and step values
Tick Mark Support: Optional tick marks for discrete value selection
Display Formatting: Customizable value display with formatting functions
Form Control Integration: Implements ControlValueAccessor for reactive forms
Validation Support: Native Angular validation system compatibility
Material Design: Built on Angular Material slider foundation

🔧 Features

✅ ControlValueAccessor Implementation - Works with Angular forms
✅ Material Design Integration - Uses Angular Material components
✅ Single & Range Selection - Flexible selection modes
✅ Configurable Steps - Set increment/decrement values
✅ Tick Marks - Discrete value selection support
✅ Value Formatting - Custom display formatting
✅ Form Validation - Native validation integration
✅ Disabled State - Disable slider interaction
✅ Display Functions - Custom value presentation

Key Benefits

| Feature | Description | |---------|-------------| | Intuitive Selection | Drag-based numeric value selection | | Range Support | Select minimum and maximum values simultaneously | | Precise Control | Configurable step values for precise selection | | Visual Feedback | Tick marks and value display | | Form Integration | Seamless Angular form control integration | | Flexible Formatting | Custom value display formatting |

Summary

The range-selection-input library provides an intuitive numeric selection component with support for both single values and ranges, making it ideal for settings like price ranges, quantity selections, or any scenario requiring precise numeric input through a visual interface.

Quick Start Guide

Installation & Setup (2 minutes)

1. Import Module

// app.module.ts
import { RangeSelectionInputModule } from 'range-selection-input';

@NgModule({
  imports: [
    RangeSelectionInputModule
  ]
})
export class AppModule { }

2. No Module Configuration Required

The RangeSelectionInputModule does not require global configuration. Components can be used immediately after module import.

Quick Examples

Example 1: Basic Single Value Slider

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-basic-range',
  template: `
    <app-range-selection-input
      [formControl]="volumeControl"
      [min]="0"
      [max]="100"
      [step]="1"
      label="Volume Level"
      [showTicks]="true">
    </app-range-selection-input>
    
    <div>Volume: {{ volumeControl.value }}</div>
  `
})
export class BasicRangeComponent {
  volumeControl = new FormControl(50);
}

Example 2: Dual Range Slider (Price Range)

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-price-range',
  template: `
    <app-range-selection-input
      [formControl]="priceControl"
      [min]="0"
      [max]="1000"
      [step]="10"
      [showTicks]="true"
      label="Price Range ($)"
      [displayFunction]="formatPrice">
    </app-range-selection-input>
    
    <div class="price-display">
      <div *ngIf="priceControl.value">
        <strong>Selected Range:</strong> 
        {{ formatPrice(priceControl.value.min) }} - {{ formatPrice(priceControl.value.max) }}
      </div>
    </div>
  `,
  styles: [`
    .price-display {
      margin-top: 1rem;
      padding: 1rem;
      background: #f5f5f5;
      border-radius: 4px;
      font-size: 1.1rem;
    }
  `]
})
export class PriceRangeComponent {
  priceControl = new FormControl({ min: 100, max: 500 });
  
  formatPrice(value: number): string {
    return `$${value.toFixed(0)}`;
  }
}

Example 3: Quantity Selection with Validation

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-quantity-selector',
  template: `
    <app-range-selection-input
      [formControl]="quantityControl"
      [min]="1"
      [max]="10"
      [step]="1"
      [showTicks]="true"
      label="Select Quantity"
      [required]="true">
    </app-range-selection-input>
    
    <div class="errors" *ngIf="quantityControl.errors && quantityControl.touched">
      <div *ngIf="quantityControl.hasError('required')">
        Quantity selection is required
      </div>
      <div *ngIf="quantityControl.hasError('min')">
        Minimum quantity is 1
      </div>
      <div *ngIf="quantityControl.hasError('max')">
        Maximum quantity is 10
      </div>
    </div>
    
    <div class="quantity-info">
      Quantity: {{ quantityControl.value }}
      <span *ngIf="quantityControl.value">
        (Total: ${{ (quantityControl.value * unitPrice).toFixed(2) }})
      </span>
    </div>
  `,
  styles: [`
    .errors {
      color: #f44336;
      font-size: 0.875rem;
      margin-top: 0.5rem;
    }
    .quantity-info {
      margin-top: 1rem;
      padding: 0.75rem;
      background: #e8f5e8;
      border: 1px solid #4caf50;
      border-radius: 4px;
      color: #2e7d32;
    }
  `]
})
export class QuantitySelectorComponent {
  quantityControl = new FormControl(1, [
    Validators.required,
    Validators.min(1),
    Validators.max(10)
  ]);
  
  unitPrice = 29.99;
}

Example 4: Percentage Selection

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-percentage-selector',
  template: `
    <app-range-selection-input
      [formControl]="opacityControl"
      [min]="0"
      [max]="100"
      [step]="5"
      [showTicks]="true"
      label="Opacity Level"
      [displayFunction]="formatPercentage">
    </app-range-selection-input>
    
    <div class="preview-container">
      <div 
        class="preview-box" 
        [style.opacity]="(opacityControl.value || 50) / 100">
        <p>Preview Box</p>
        <p>Opacity: {{ formatPercentage(opacityControl.value || 50) }}</p>
      </div>
    </div>
  `,
  styles: [`
    .preview-container {
      margin-top: 2rem;
      display: flex;
      justify-content: center;
    }
    .preview-box {
      width: 200px;
      height: 100px;
      background: linear-gradient(45deg, #2196f3, #21cbf3);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
      transition: opacity 0.3s ease;
    }
    .preview-box p {
      margin: 0.25rem 0;
    }
  `]
})
export class PercentageSelectorComponent {
  opacityControl = new FormControl(75);
  
  formatPercentage(value: number): string {
    return `${value}%`;
  }
}

Example 5: Temperature Range Selection

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-temperature-range',
  template: `
    <app-range-selection-input
      [formControl]="temperatureControl"
      [min]="-10"
      [max]="40"
      [step]="1"
      [showTicks]="true"
      label="Temperature Range (°C)"
      [displayFunction]="formatTemperature">
    </app-range-selection-input>
    
    <div class="temperature-info" [attr.data-range]="getTemperatureRange()">
      <h4>Temperature Range</h4>
      <p>{{ formatTemperature(temperatureControl.value.min) }} to {{ formatTemperature(temperatureControl.value.max) }}</p>
      <div class="range-description">
        {{ getTemperatureDescription() }}
      </div>
    </div>
  `,
  styles: [`
    .temperature-info {
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 8px;
      text-align: center;
      transition: all 0.3s ease;
    }
    .temperature-info[data-range="cold"] {
      background: linear-gradient(135deg, #e3f2fd, #bbdefb);
      border: 2px solid #2196f3;
      color: #1565c0;
    }
    .temperature-info[data-range="moderate"] {
      background: linear-gradient(135deg, #fff3e0, #ffcc02);
      border: 2px solid #ff9800;
      color: #ef6c00;
    }
    .temperature-info[data-range="warm"] {
      background: linear-gradient(135deg, #ffebee, #ef5350);
      border: 2px solid #f44336;
      color: #c62828;
    }
    .range-description {
      margin-top: 0.5rem;
      font-style: italic;
      opacity: 0.8;
    }
  `]
})
export class TemperatureRangeComponent {
  temperatureControl = new FormControl({ min: 15, max: 25 });
  
  formatTemperature(value: number): string {
    if (value < 0) {
      return `${Math.abs(value)}°C below freezing`;
    }
    return `${value}°C`;
  }
  
  getTemperatureRange(): string {
    const avg = (this.temperatureControl.value.min + this.temperatureControl.value.max) / 2;
    if (avg < 10) return 'cold';
    if (avg < 25) return 'moderate';
    return 'warm';
  }
  
  getTemperatureDescription(): string {
    const range = this.getTemperatureRange();
    const descriptions = {
      cold: 'Cool weather - jacket recommended',
      moderate: 'Pleasant temperature',
      warm: 'Warm weather - stay hydrated'
    };
    return descriptions[range];
  }
}

Example 6: Form Integration with Dynamic Range

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

@Component({
  selector: 'app-dynamic-range-form',
  template: `
    <form [formGroup]="dynamicForm">
      <app-range-selection-input
        formControlName="age"
        [min]="18"
        [max]="100"
        [step]="1"
        [showTicks]="true"
        label="Age"
        placeholder="Select age"
        [required]="true">
      </app-range-selection-input>
      
      <app-range-selection-input
        formControlName="budget"
        [min]="budgetRange.min"
        [max]="budgetRange.max"
        [step]="budgetRange.step"
        [showTicks]="true"
        label="Budget Range ($)"
        [displayFunction]="formatCurrency">
      </app-range-selection-input>
      
      <app-range-selection-input
        formControlName="rating"
        [min]="0"
        [max]="5"
        [step]="0.5"
        [showTicks]="true"
        label="Rating"
        [displayFunction]="formatStars">
      </app-range-selection-input>
    </form>
    
    <div class="form-status">
      <div>Form Valid: {{ dynamicForm.valid }}</div>
      <div>Age: {{ dynamicForm.get('age')?.value }}</div>
      <div>Budget: {{ formatCurrency(dynamicForm.get('budget')?.value?.min) }} - {{ formatCurrency(dynamicForm.get('budget')?.value?.max) }}</div>
      <div>Rating: {{ formatStars(dynamicForm.get('rating')?.value) }}</div>
    </div>
    
    <div class="controls">
      <button (click)="setDefaults()">Set Defaults</button>
      <button (click)="resetForm()">Reset</button>
      <button (click)="submitForm()" [disabled]="dynamicForm.invalid">Submit</button>
    </div>
  `,
  styles: [`
    form {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      max-width: 400px;
    }
    .form-status {
      margin-top: 1rem;
      padding: 1rem;
      background: #f5f5f5;
      border-radius: 4px;
      font-family: monospace;
      font-size: 0.9rem;
    }
    .controls {
      margin-top: 1rem;
      display: flex;
      gap: 0.5rem;
    }
    button {
      padding: 0.5rem 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: white;
      cursor: pointer;
    }
    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  `]
})
export class DynamicRangeFormComponent {
  dynamicForm: FormGroup;
  budgetRange = { min: 1000, max: 10000, step: 100 };
  
  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      age: [25, [Validators.required, Validators.min(18), Validators.max(100)]],
      budget: [{ min: 3000, max: 7000 }, [Validators.required]],
      rating: [3.5, [Validators.required, Validators.min(0), Validators.max(5)]]
    });
  }

  formatCurrency(value: number): string {
    if (typeof value === 'object' && value !== null) {
      return `$${value.min?.toLocaleString()} - $${value.max?.toLocaleString()}`;
    }
    return `$${value.toLocaleString()}`;
  }

  formatStars(value: number): string {
    const fullStars = Math.floor(value);
    const hasHalfStar = value % 1 >= 0.5;
    const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
    
    return '★'.repeat(fullStars) + 
           (hasHalfStar ? '☆' : '') + 
           '☆'.repeat(emptyStars) + 
           ` (${value})`;
  }

  setDefaults() {
    this.dynamicForm.patchValue({
      age: 30,
      budget: { min: 2500, max: 8000 },
      rating: 4.0
    });
  }

  resetForm() {
    this.dynamicForm.reset();
  }

  submitForm() {
    if (this.dynamicForm.valid) {
      console.log('Form submitted:', this.dynamicForm.value);
      alert('Form submitted successfully!');
    }
  }
}

Component API

Inputs

Outputs

| Output | Type | Description | |--------|------|-------------| | valueChange | EventEmitter<number \| { min: number; max: number }> | Emits when slider value changes |

Form Integration (ControlValueAccessor)

The component implements Angular's ControlValueAccessor interface for seamless form integration.

ControlValueAccessor Implementation

// writeValue(value: number | { min: number; max: number }): void
// Sets the slider value(s)
writeValue(value: number | { min: number; max: number }): void {
  this.selectedValue = value;
}

// registerOnChange(fn: any): void
// Registers a callback for value changes
registerOnChange(fn: any): void {
  this.onChange = fn;
}

// registerOnTouched(fn: any): void
// Registers a callback for touch events
registerOnTouched(fn: any): void {
  this.onTouch = fn;
}

// setDisabledState(isDisabled: boolean): void
// Sets disabled state
setDisabledState?(isDisabled: boolean): void {
  this.disabled = isDisabled;
}

Form Integration Examples

Reactive Forms

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-range-form',
  template: `
    <form [formGroup]="rangeForm">
      <app-range-selection-input
        formControlName="singleValue"
        [min]="0"
        [max]="100"
        [step]="5"
        [showTicks]="true"
        label="Single Value"
        [required]="true">
      </app-range-selection-input>
      
      <app-range-selection-input
        formControlName="rangeValue"
        [min]="0"
        [max]="1000"
        [step]="25"
        [showTicks]="true"
        label="Range Value"
        [required]="true">
      </app-range-selection-input>
    </form>
  `
})
export class ReactiveRangeFormComponent {
  rangeForm = new FormGroup({
    singleValue: new FormControl(50, [Validators.required, Validators.min(0), Validators.max(100)]),
    rangeValue: new FormControl({ min: 100, max: 500 }, [Validators.required])
  });
}

Template-Driven Forms

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

@Component({
  selector: 'app-template-range-form',
  template: `
    <app-range-selection-input
      [(ngModel)]="selectedValue"
      name="templateRange"
      [min]="0"
      [max]="100"
      [step]="10"
      [showTicks]="true"
      label="Template Range Selection"
      required>
    </app-range-selection-input>
    
    <div *ngIf="selectedValue">
      Selected: {{ selectedValue }}
    </div>
  `
})
export class TemplateRangeFormComponent {
  selectedValue = 25;
}

Module Configuration