Range Slider
Overview
The Range Slider utility provides an interactive dual-handle slider for selecting a range of values. This is commonly used for price filters, date ranges, or any other numeric range selection.
Initialization
The Range Slider is automatically initialized when you call the main utilities function and the page contains elements with the .pds-range-slider
class:
// Initialize all utilities including range slider
Phenix(document).utilities();
// Range slider is part of the libraries type
Phenix(document).utilities({
type: 'libraries'
});
Basic Usage
Add the .pds-range-slider
class to a div element and optionally specify min and max values:
<div class="pds-range-slider" data-min="100" data-max="800"></div>
How It Works
- The utility detects elements with the
.pds-range-slider
class - It imports the noUiSlider library and its CSS (with RTL support if needed)
- It initializes each slider with the specified options
- If input fields with
.range-min
and.range-max
classes are found in the parent container, they are automatically connected to the slider
Full Example with Input Fields
<div class="price-filter">
<div class="pds-range-slider" data-min="50" data-max="500"></div>
<div class="range-inputs flexbox align-center-y gap-10 mt-10">
<input type="number" class="range-min form-control" value="50">
<span class="tx-nowrap">to</span>
<input type="number" class="range-max form-control" value="500">
</div>
</div>
Configuration Options
Attribute | Description | Default |
---|---|---|
data-min | Minimum value of the range | 10 |
data-max | Maximum value of the range | 900 |
Advanced Customization
The Range Slider uses the noUiSlider library with the following default configuration:
noUiSlider.create(slider, {
step: 5, // Step size between values
connect: true, // Connect the handles with a bar
tooltips: true, // Show tooltips when dragging
start: [minRange || 150, maxRange || 700], // Starting handle positions
direction: page_direction, // RTL or LTR based on page direction
range: {
'min': minRange || 10, // Minimum range value
'max': maxRange || 900 // Maximum range value
},
});
Styling
The Range Slider comes with default styling from the noUiSlider library. The utility automatically loads the appropriate CSS file based on the page direction (RTL or LTR).
You can customize the appearance with CSS:
/* Slider track */
.pds-range-slider {
height: 10px;
margin: 20px 0;
}
/* Slider handle */
.pds-range-slider .noUi-handle {
border-radius: 50%;
background-color: var(--primary-color);
border-color: var(--primary-color);
}
/* Connection bar */
.pds-range-slider .noUi-connect {
background-color: var(--primary-color);
}
/* Tooltip */
.pds-range-slider .noUi-tooltip {
background-color: var(--primary-color);
color: white;
border: none;
}
Examples
Price Filter
<div class="filter-widget">
<h4>Price Range</h4>
<div class="pds-range-slider" data-min="10" data-max="1000"></div>
<div class="flexbox align-center-y gap-15 mt-15">
<div class="input-group">
<span class="input-group-text">$</span>
<input type="number" class="form-control range-min" value="10">
</div>
<span>to</span>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="number" class="form-control range-max" value="1000">
</div>
</div>
</div>
Age Range Selector
<div class="age-filter">
<label>Age Range:</label>
<div class="pds-range-slider" data-min="18" data-max="65"></div>
<div class="flexbox align-center-y gap-10 mt-10">
<input type="number" class="range-min form-control tiny" value="18">
<span>-</span>
<input type="number" class="range-max form-control tiny" value="65">
<span>years</span>
</div>
</div>
Date Range Selector
<div class="date-range">
<label>Select Years:</label>
<div class="pds-range-slider" data-min="2000" data-max="2025"></div>
<div class="flexbox align-center-y gap-10 mt-10">
<input type="number" class="range-min form-control" value="2000">
<span>to</span>
<input type="number" class="range-max form-control" value="2025">
</div>
</div>
Best Practices
- Always provide visual feedback about the selected range
- Consider adding labels or units to clarify what the range represents
- Use appropriate step sizes for the type of data (smaller steps for precise values)
- Test the slider on touch devices to ensure good usability
- Provide input fields for direct value entry when precision is important
- Use appropriate min/max values that make sense for your data
Browser Compatibility
The Range Slider utility is compatible with all modern browsers and uses the noUiSlider library for cross-browser consistency.