Filter Slider Range Selection

Work in progress

Implement a slider range selection when users requires to select a range-based value refining data results.

Technical Overview

The LmnFilterSliderRangeSelectionComponent enables users to select a range of values using a slider interface. It extends the abstract LmnFilterSliderBaseDirective class, ensuring consistent behavior and integration with the filter container system.

Key Features

• Range Selection: Allows users to select a range of values using a dual-handle slider
• Configurable Boundaries: Customizable minimum and maximum values for the slider
• Customizable Templates: Supports custom templates for slider appearance
• Accessibility Support: Comprehensive ARIA attributes for screen reader compatibility
• Negative Styling: Optional negative styling variant for different visual contexts
• Programmatic Control: Methods to clear selections or set specific range values

When to Use

Use the LmnFilterSliderRangeSelectionComponent when:

• Users need to filter data based on a range of values (e.g., price range, date range)
• The filtering criteria involve continuous numeric or string values
• You want to provide an intuitive visual representation of the selected range
• You need to integrate with a LmnFilterContainerDirective for coordinated filtering

Implementation

To implement the filter, you need to provide:

1. A unique filterId for identification
2. Configuration for the slider through sliderConfiguration input
3. Optional custom templates for slider appearance