polyfront-slider is an open-source, dependency-free Web Component slider built for modern web frameworks including React, Vue, Angular, Svelte, and plain HTML/JS. Designed for high configurability, accessibility, and theming, it provides everything you need in a single package.
🚀 Key Features
| Category | Highlights |
|---|---|
| 🎨 UI/UX | OKLCH color system, dark mode, hover/active/focus states, large touch targets, elevation shadows |
| 🧩 Configurable | Supports {min, max, step} or discrete arrays [0,1500,1600,…], auto-detects step size, disables missing values |
| 🧱 Modes | Single or dual-thumb (range) slider |
| 🧠 Smart Logic | Auto GCD step detection, blocked intervals, minimum thumb distance |
| ♿ Accessible | WAI-ARIA compliant, keyboard navigation, form-associated support |
| 🖥️ Responsive | 100% width, mobile-friendly, fits any layout |
| 🌗 Themeable | Size presets (sm, md, lg), CSS tokens, dark/light mode support |
| 🧪 Reliable | TypeScript + Vitest + Storybook 8.6 + GitHub CI |
| 🧰 Reusable | Works standalone or via npm in any framework |
🧩 Installation
Scoped (recommended)
npm install @3nvs/polyfront-slider
Alias (unscoped)
npm install polyfront-slider
🧑💻 Quick Start
1️⃣ Register the component
import { definePolyfrontSlider } from '@3nvs/polyfront-slider';
definePolyfrontSlider();
2️⃣ Add to HTML / JSX
<polyfront-slider id="price-slider" style="inline-size:100%;max-inline-size:480px"></polyfront-slider>
3️⃣ Configure dynamically
const slider = document.getElementById('price-slider');
slider.setConfig({
mode: 'range',
orientation: 'horizontal',
size: 'md',
values: [0,1500,1600,1700,1800,1900,2000],
showTicks: true,
showLabels: true,
showTooltip: true,
tickEvery: 1,
disableMissingSteps: true,
blockedIntervals: [[1600,1699]],
minThumbDistance: 1,
name: 'price'
});
🎯 Helper Functions
Range Slider
import { createRangeSlider } from '@3nvs/polyfront-slider';
const slider = createRangeSlider(0, 2000, 100);
document.body.appendChild(slider);
Volume Control
import { createVolumeControl } from '@3nvs/polyfront-slider';
const volume = createVolumeControl(100);
volume.style.height = '200px';
document.body.appendChild(volume);
Discrete Sliders
import { createPriceSlider, createDiscreteSlider } from '@3nvs/polyfront-slider';
document.body.appendChild(createPriceSlider([0,1500,1600,1700,1800,1900,2000]));
document.body.appendChild(createDiscreteSlider(['XS','S','M','L','XL','XXL'],'single'));
🎨 Framework Integrations
React, Vue, Angular, Svelte are all supported via createSliderWithProps or helper functions.
Example for React:
import { definePolyfrontSlider, createSliderWithProps } from '@3nvs/polyfront-slider';
definePolyfrontSlider();
const slider = createSliderWithProps({ mode:'range', min:0, max:2000, step:100, showTooltip:true });
document.body.appendChild(slider);
Full examples available in Storybook Demo.
⚙️ Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
| mode | 'single' | 'single' | Single or range slider |
| orientation | 'horizontal' / 'vertical' | 'horizontal' | Slider direction |
| size | 'sm'/'md'/'lg' | 'md' | Track & thumb size preset |
| values | array - number /string /object | — | Discrete slider values |
| min/max/step | number | — | Continuous slider range |
| disableMissingSteps | boolean | true | Disable undefined steps |
| blockedIntervals | [number,number][] | [] | Disable value ranges |
| minThumbDistance | number | 0 | Min thumb distance in range mode |
| showTicks | boolean | false | Display tick marks |
| showLabels | boolean | false | Display tick labels |
| showTooltip | boolean | false | Show thumb tooltip |
| tickEvery | number | 1 | Render every N-th tick/label |
| rtl | boolean | false | Right-to-left support |
| ariaLabel | string | — | Accessibility label |
| name | string | — | Form submission key |
🎨 Theming & Custom Styles
polyfront-slider {
--pf-color-fill: oklch(0.63 0.21 35);
--pf-color-fill-strong: oklch(0.56 0.22 35);
--pf-color-thumb-border: oklch(0.63 0.21 35);
--pf-track-size: 10px;
--pf-thumb-size: 28px;
--pf-focus: 0 0 0 4px color-mix(in oklab, var(--pf-color-fill) 35%, transparent);
}
Supports dark mode and reduced motion.
🧪 Testing
npm run test
Example:
const el = new PolyfrontSlider();
el.setConfig({ min: 0, max: 100, step: 10, mode: 'range' });
el.setValue([20, 80]);
expect(el.getValue()).toEqual([20, 80]);
📘 Storybook Demo
Live demo: polyfront-slider Storybook
Local preview:
npm run storybook
📁 Folder Structure
polyfront-slider/
├─ dist/ ← build output
├─ src/
├─ tests/
├─ stories/
├─ .storybook/
├─ .github/workflows/
├─ packages/
│ ├─ slider/
│ └─ slider-shim/
├─ LICENSE
├─ package.json
└─ README.md
📦 Install & Explore
npm : polyfront-slider | GitHub | ⭐ Star the repo if you find it useful!
Try it today, Enterprise-Grade Web Component Slider!
#react #angular #frontend #opensource #cli #DevCommunity #DeveloperResources #DevPlatform