Filter Slider

Create interactive range and value sliders for numeric filtering like prices, sizes, ratings, and quantities.

Filter Sliders provide intuitive range selection for numeric data. They're perfect for price ranges, sizes, ratings, quantities, and any numeric facet where users need to specify minimum/maximum values.

Slider Types

Type	Interface	Use Cases	User Experience
Single	One handle, single value	Maximum budget, minimum rating	Set upper/lower limit
Range	Two handles, min/max values	Price ranges, size ranges	Define full range

Slider Behavior Options

Behavior	Logic	Example	Result
Narrow (AND)	All conditions must match	Price $100-500 AND Rating 4+	More specific results
Widen (OR)	Any condition can match	Budget <$200 OR Premium features	Broader results

Creating Slider Filters

Navigate to Filter Creation

Go to GuidePlugin > Filter > Create and select the Slider tab.

Configure Slider Type

Set up basic slider behavior:

Slider configuration interface

Setting	Options	When to Use
Slider Type	Single / Range	Single for "up to X", Range for "between X and Y"
Behavior	Narrow / Widen	Narrow to refine, Widen to expand results

Add Visual Elements

Configure slider images for better user understanding:

Image Placement Rules:

1 image: Centered above slider
2 images: Left and right of slider
3+ images: Distributed evenly across slider

Image Count	Layout	Best For
Single	Centered	Price, rating indicators
Dual	Left/Right	Min/Max visualization (small/large, cheap/expensive)
Multiple	Distributed	Progressive scales (1-5 stars, XS-XL sizes)

Configure Settings

Fine-tune slider behavior and appearance:

Slider settings interface

Essential Settings:

Setting	Purpose	Example
Lower Limit	Minimum selectable value	$0, Size 1, Rating 1
Upper Limit	Maximum selectable value	$10000, Size 100, Rating 5
Prefix	Text before value	"$", "Size ", "★"
Suffix	Text after value	" USD", " sq ft", " stars"

Data Range Warning: Only set custom limits if you're certain content exists in those ranges. Empty ranges create poor user experiences.

Slider Examples

E-Commerce Price Range

Configuration:

Type: Range slider
Lower Limit: $0
Upper Limit: $2000
Prefix: "$"
Images: 💸 (left), 💰 (right)

Condition: Price facet between selected min and max values

Property Size Filter

Configuration:

Type: Single slider (minimum size)
Lower Limit: 500
Upper Limit: 5000
Suffix: " sq ft"
Images: 🏠 (small), 🏢 (medium), 🏰 (large)

Condition: Square footage greater than or equal to selected value

Rating Filter

Configuration:

Type: Single slider (minimum rating)
Lower Limit: 1
Upper Limit: 5
Suffix: " stars"
Images: ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐

Condition: Rating greater than or equal to selected value

Visual Design Best Practices

Element	Recommendation	Impact
Image Size	32x32px to 64x64px	Consistent visual scale
Prefix/Suffix	Keep short (1-4 characters)	Clean value display
Range Limits	Match actual data range	Prevent empty results
Visual Icons	Use intuitive symbols	Faster user comprehension

Common Slider Use Cases

Financial Applications

Slider	Configuration	Facet
Budget Range	$0 - $50,000, Range type	Price
Down Payment	$0 - $20,000, Single type	Down payment amount
Interest Rate	0% - 15%, Range type	APR

Real Estate

Slider	Configuration	Facet
Price Range	$100K - $2M, Range type	Property price
Square Footage	500 - 5000 sq ft, Range type	Property size
Lot Size	0.1 - 5 acres, Range type	Lot size

Product Specifications

Slider	Configuration	Facet
Weight Range	0 - 100 lbs, Range type	Product weight
Screen Size	10" - 85", Range type	Display size
Battery Life	1 - 24 hours, Single minimum	Battery duration

Advanced Slider Features

Custom Value Steps

Configure how the slider increments:

Step Size	Use Case	Example
1	Integers, ratings	1, 2, 3, 4, 5
5	Rounded values	5, 10, 15, 20
100	Large ranges	100, 200, 300
0.1	Decimal precision	4.1, 4.2, 4.3

Dynamic Range Calculation

Let GuidePlugin calculate optimal ranges from your data:

Method	Benefit	When to Use
Auto-calculation	Always matches content	Dynamic content
Custom limits	Controlled experience	Known stable ranges
Hybrid approach	Balanced flexibility	Most implementations

Troubleshooting Sliders

Problem	Symptoms	Solutions
No Results	Empty results at certain ranges	Check facet data coverage Adjust range limits Verify condition mapping
Poor Performance	Slow slider movement	Optimize facet indexing Reduce complex conditions Check server resources
Visual Issues	Overlapping elements, poor mobile display	Test responsive behavior Optimize image sizes Adjust prefix/suffix length
Range Problems	Slider doesn't reflect actual data	Use auto-calculated ranges Verify facet data types Check for data inconsistencies

Slider Accessibility

Feature	Implementation	Benefit
Keyboard Navigation	Arrow keys move slider	Screen reader compatibility
ARIA Labels	Descriptive slider labels	Assistive technology support
High Contrast	Clear visual indicators	Visual accessibility
Touch Targets	Minimum 44px touch areas	Mobile accessibility

Performance Optimization

Factor	Impact	Optimization
Range Size	Large ranges slow queries	Use reasonable limits
Image Count	Many images slow loading	Optimize images <20KB each
Real-time Updates	Live filtering impacts performance	Consider debounced updates

Next Steps

Action	Purpose	Link
Combine with Cards	Mix slider and card filters	Filter Cards →
Add to Guides	Use sliders in complete experiences	Guides Documentation →
Advanced Logic	Add conditional slider behavior	Logic Documentation →

User Testing: Test your sliders with real users to ensure the ranges and increments feel natural for your specific use case.

Filter Slider

On this page