Range Slider
Overview
The Range Slider component in the Phenix Design System provides an enhanced input range experience with features like dual handles for range selection, tooltips, custom styling, and improved user interaction. It's designed to make selecting numeric values or ranges more intuitive and visually appealing compared to standard HTML range inputs.
Basic Usage
To create a basic range slider, use the .pds-range-slider
class with a standard range input:
<div class="pds-range-slider">
<input type="range" min="0" max="100" value="50" class="form-control">
</div>
Features
Custom Min and Max Values
Set custom minimum and maximum values for the slider:
<div class="pds-range-slider">
<input type="range" min="-50" max="50" value="0" class="form-control">
</div>
Step Control
Define the step increment for the slider using the step
attribute:
<div class="pds-range-slider">
<input type="range" min="0" max="100" step="5" value="50" class="form-control">
</div>
Range Selection (Dual Handles)
Enable range selection with dual handles by using the data-range
attribute:
<div class="pds-range-slider" data-range="true">
<input type="range" min="0" max="1000" value="200,800" class="form-control">
</div>
Value Display
Show the current value(s) with tooltips using the data-tooltip
attribute:
<div class="pds-range-slider" data-tooltip="true">
<input type="range" min="0" max="100" value="50" class="form-control">
</div>
Customization
Custom Colors
Customize the slider's colors using CSS variables or utility classes:
<div class="pds-range-slider" style="--slider-color: var(--primary-color);">
<input type="range" min="0" max="100" value="50" class="form-control">
</div>
Slider with Labels
Add min, max, and current value labels to the slider:
<div class="mb-20">
<div class="pds-range-slider" data-tooltip="true">
<input type="range" min="0" max="100" value="50" class="form-control">
</div>
<div class="flexbox align-between mt-10">
<span class="fs-14 color-gray">0</span>
<span class="fs-14 weight-medium">Current: <span class="slider-value">50</span></span>
<span class="fs-14 color-gray">100</span>
</div>
</div>
Vertical Slider
Create a vertical slider using the data-vertical
attribute:
<div class="pds-range-slider" data-vertical="true" style="height: 200px;">
<input type="range" min="0" max="100" value="50" class="form-control">
</div>
Disabled State
Disable the slider by adding the disabled
attribute:
<div class="pds-range-slider">
<input type="range" min="0" max="100" value="50" class="form-control" disabled>
</div>
JavaScript API
The Range Slider component is not directly initialized through a Phenix method. Instead, it uses a third-party library that is loaded dynamically when needed. The component is initialized when the range slider script is loaded.
// The range slider is loaded when needed via the utilities function
Phenix(document).import("range-slider", "script", "range-slider/range-slider.js", () => {
// Range slider is now initialized
console.log('Range slider initialized');
});
// The CSS is also loaded dynamically
Phenix(document).import(`range-slider`, "link", `range-slider/range-slider.css`, () => {}, { integrated: true });
This dynamic loading happens automatically when the utilities function encounters range slider elements with the .pds-range-slider
class.
Handling Value Changes
Listen for value change events:
Phenix('.pds-range-slider input[type="range"]').on('input', (event) => {
const value = event.target.value;
console.log('Current value:', value);
// Update a display element with the current value
Phenix('.slider-value').text(value);
});
Programmatically Setting Values
Set the slider value programmatically:
// For single handle slider
const slider = Phenix('.pds-range-slider input[type="range"]')[0];
slider.value = 75;
// Trigger change event to update visual state
const event = new Event('input', { bubbles: true });
slider.dispatchEvent(event);
// For dual handle slider
const rangeSlider = Phenix('.pds-range-slider[data-range="true"] input[type="range"]')[0];
rangeSlider.value = '25,75';
// Trigger change event
rangeSlider.dispatchEvent(event);
Configuration Options
The Range Slider component supports several data attributes for configuration:
Attribute | Type | Default | Description |
---|---|---|---|
data-range | Boolean | false | Enables dual handle mode for selecting a range |
data-tooltip | Boolean | false | Shows tooltips with the current value(s) |
data-vertical | Boolean | false | Creates a vertical slider instead of horizontal |
data-prefix | String | '' | Adds a prefix to the tooltip value (e.g., '$') |
data-suffix | String | '' | Adds a suffix to the tooltip value (e.g., '%') |
Accessibility
The Range Slider component maintains accessibility features:
- Keyboard navigation (Arrow keys, Home, End)
- ARIA attributes for screen readers
- Focus states for keyboard users
Browser Compatibility
The Range Slider component is compatible with all modern browsers that support HTML5 range inputs and JavaScript ES6 features.