Price Range Filter
Price Ranges
A dual range slider displaying a purple-to-orange gradient fill and glass-frosted min/max price indicator bubbles.
<div class="premium-price-range">
<div class="range-sliders-wrap">
<input type="range" min="0" max="1000" value="150" class="range-thumb">
<div class="slider-track-bg">
<div class="slider-track-fill" style="left: 15%; right: 20%;"></div>
</div>
</div>
</div>
Search Tags
Search Tags
A search box showing dynamic tag insertion pills. Entering texts or clicking suggest pills appends active glowing tags.
<div class="premium-search-tags-box">
<div class="search-tag-input-wrap">
<div class="tag-pill">UI<i class="fa-solid fa-xmark"></i></div>
<input type="text" placeholder="Add tag...">
</div>
</div>
Sidebar Filter
Category Bars
A collapsible vertical sidebar e-commerce filter panel with accordion headers and animated neon checkboxes.
<div class="premium-sidebar-filter-panel">
<div class="accordion-section">
<div class="accordion-header">
<span>Categories</span>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div class="accordion-content">
<label class="filter-checkbox-row">
<input type="checkbox">
<span class="check-box-custom"></span>
</label>
</div>
</div>
</div>
Sort Dropdown
Dropdowns
A sorting dropdown menu that slides and scales open smoothly using a 3D perspective keyframe transform.
<div class="premium-sort-dropdown">
<button class="dropdown-trigger-btn">
<span>Sort: Popularity</span>
</button>
<div class="dropdown-menu-list">
<div class="menu-item active">Popularity</div>
<div class="menu-item">Newest</div>
</div>
</div>
Multi-Select Chips
Chip Filters
A horizontal scrollable chip row with multi-select toggle states, glow activation, and a live selection counter badge.
<div class="premium-chip-filter">
<div class="chip-scroll-row">
<div class="filter-chip active">All</div>
<div class="filter-chip">Mobile</div>
<div class="filter-chip">Desktop</div>
</div>
</div>
Rating Filter
Rating
A star-based rating filter panel with glow-on-hover star rows, active selection highlight, and animated count badges.
<div class="premium-rating-filter">
<div class="rating-rows">
<label class="rating-row">
<input type="radio" name="ratingFilter" value="5">
<div class="rating-stars">...stars...</div>
<span class="rating-label">5 Stars</span>
</label>
</div>
</div>
Last 7d
This Month
This Year
Date Range Filter
Date Range
A glassmorphic date range picker with From/To date inputs and quick preset buttons for 7-day, monthly, and yearly ranges.
<div class="premium-date-range-filter">
<div class="date-inputs-row">
<div class="date-input-group">
<label>From</label>
<input type="date" class="date-input-field">
</div>
<div class="date-input-group">
<label>To</label>
<input type="date" class="date-input-field">
</div>
</div>
</div>
Filter by Color
Purple selected
Color Swatch Filter
Color
A multi-select color dot swatch filter with glowing active ring animation, color names, and a live result readout below.
<div class="premium-color-swatch-filter">
<div class="color-swatches-grid">
<div class="color-swatch active" style="--swatch-color:#7b61ff;"></div>
<div class="color-swatch" style="--swatch-color:#ff7a3d;"></div>
<div class="color-swatch" style="--swatch-color:#10b981;"></div>
</div>
</div>
Components
Recent
Autocomplete Search
Autocomplete
A premium search input with animated grouped autocomplete dropdown, keyboard shortcut badge, and focus-triggered suggestions.
<div class="premium-autocomplete-search">
<div class="autocomplete-input-wrap">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" placeholder="Search...">
<div class="autocomplete-kbd">⌘K</div>
</div>
<div class="autocomplete-dropdown">
<div class="auto-suggestion-group">
<div class="auto-group-label">Components</div>
<div class="auto-item">Buttons</div>
</div>
</div>
</div>
Brand Filter Grid
Brands
A grid of brand icons with interactive glowing borders and solid active states.
<div class="brand-grid">
<div class="brand-item active"><i class="fa-brands fa-apple"></i></div>
<div class="brand-item"><i class="fa-brands fa-windows"></i></div>
</div>
Distance Slider
Distance
A smooth range slider with custom gradient fill and live distance readout.
<div class="distance-slider-wrap">
<input type="range" class="distance-thumb" oninput="updateDistance(this)">
<div class="distance-track-bg"></div>
<div class="distance-track-fill" style="width: 15%;"></div>
</div>
Size Selection Grid
Sizes
A multi-select size filter with glowing active states and subtle hover transitions.
<div class="size-grid">
<div class="size-box">S</div>
<div class="size-box active">M</div>
</div>
Toggle Switches
Toggles
A set of smooth iOS-style toggle switches for fast boolean filtering.
<label class="premium-toggle">
<span>In Stock Only</span>
<input type="checkbox" checked>
<div class="toggle-slider"></div>
</label>
Layout Style Filter
Layout
A multi-view layout toggle with an animated sliding backdrop indicating selection.
<div class="layout-toggle">
<div class="layout-btn active"><i class="fa-solid fa-table-cells-large"></i></div>
<div class="layout-btn"><i class="fa-solid fa-list"></i></div>
<div class="layout-slider"></div>
</div>
😴 Chill Balanced Intense ⚡
😐
Balanced
Mood / Vibe Filter Mood
Emoji feedback slider for qualitative filtering by intensity or mood with live label updates.
<div class="premium-mood-filter">
<input type="range" min="0" max="100" value="50" class="mood-range-input" oninput="updateMood(this)">
<div class="mood-emoji-display" id="moodEmoji">😐</div>
</div>
Searchable Checkbox Filter Mood
Live-search within a labelled checkbox list with count badges and multi-select state.
<div class="premium-stack-filter">
<div class="stack-search-wrap">
<input type="text" placeholder="Find category…" oninput="filterStack(this.value)">
</div>
<div class="stack-item sel">
<div class="stack-chk active"></div>
<span>Typography</span>
</div>
</div>
Score Range Filter Score Range
Dual-handle slider for numeric ranges with snap presets and live min/max readout boxes.
<div class="premium-score-range">
<div class="score-dual-track">
<div class="score-dual-fill"></div>
</div>
<input type="range" class="score-thumb" id="scoreMinThumb" min="0" max="100" value="20">
<input type="range" class="score-thumb" id="scoreMaxThumb" min="0" max="100" value="80">
</div>
Click to select date range
Calendar Range Picker Calendar
Compact two-click range selection with start/end highlight, in-range fill, and month navigation.
<div class="premium-cal-picker">
<div class="cal-header-row">
<span id="calMonthLabel">May 2026</span>
<button onclick="calNav(-1)"></button>
<button onclick="calNav(1)"></button>
</div>
<div class="cal-dow-row"></div>
<div class="cal-days-grid"></div>
</div>
// access level
All
Civilian
Corp
Ghost
Netrunner
// threat index
0x00 0x3C 0xFF
// status filter
Online
Encrypted
Blacklisted
System_Filter — Cyberpunk
Cyberpunk
Neon-glitch filter panel with hex threat index, access-level chips, and tri-state status toggles.
<div class="cyber-filter-wrap">
<div class="cyber-chips-row">
<div class="cyber-chip on">All</div>
<div class="cyber-chip">Corp</div>
</div>
<input type="range" class="cyber-range-input" min="0" max="255" value="60">
<div class="cyber-status-btn cyber-green on">Online</div>
</div>