Advanced Components NEW

Premium UI components with Apple-level polish and zero dependencies

Color Picker

Interactive

Default Color Picker

Visual spectrum picker
HEX, RGB, HSL input modes
Preset color palettes
Recently used colors

Inline Color Picker

Always visible interface
Alpha channel support
Eyedropper tool (Chrome)
Keyboard navigation

Custom Presets

new ColorPicker(element, {
  presets: ['#ED8B00', '#34c759', '#007aff'],
  showRecent: true,
  format: 'rgb'
});
          

Range Slider

Touch Enabled

Single Handle Slider

Smooth drag interaction
Tooltip with value
Keyboard navigation
Touch support

Dual Handle Range

Min/max selection
Gap enforcement
Custom formatting
Snap to values

With Scale & Ticks

new RangeSlider(element, {
  showScale: true,
  showTicks: true,
  prefix: '$',
  format: (v) => v.toLocaleString()
});
          

Vertical Slider

Timeline

Animated

Project Timeline

Features

Vertical & horizontal layouts
Multiple timeline styles
Interactive events
Filtering and grouping
Zoom and pan controls
Animated transitions
Milestone markers
Date range selection

Layouts

Code Example

new Timeline(element, {
  orientation: 'vertical',
  layout: 'centered',
  showFilters: true,
  events: [...],
  groups: [...]
});
          

Real-World Integration

Theme Customizer

Performance Metrics

Color Picker

Bundle size: ~18KB
Zero dependencies
60fps interactions
Touch optimized

Range Slider

Bundle size: ~12KB
RAF-based updates
Hardware accelerated
Accessibility compliant

Timeline

Bundle size: ~22KB
Virtual scrolling ready
Lazy loading support
Smooth 60fps zoom