DEV Community

Cover image for 🎛️ Meet polyfront slider — The Enterprise-Grade Web Component Slider for Any Framework ✨
Nirmal Samaranayaka
Nirmal Samaranayaka

Posted on

🎛️ Meet polyfront slider — The Enterprise-Grade Web Component Slider for Any Framework ✨

#react #webdev #beginners #javascript

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
Enter fullscreen mode Exit fullscreen mode

Alias (unscoped)

npm install polyfront-slider
Enter fullscreen mode Exit fullscreen mode

🧑‍💻 Quick Start

1️⃣ Register the component 

import { definePolyfrontSlider } from '@3nvs/polyfront-slider';
definePolyfrontSlider();
Enter fullscreen mode Exit fullscreen mode

2️⃣ Add to HTML / JSX 

<polyfront-slider id="price-slider" style="inline-size:100%;max-inline-size:480px"></polyfront-slider>
Enter fullscreen mode Exit fullscreen mode

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'
});
Enter fullscreen mode Exit fullscreen mode

🎯 Helper Functions

polyfront-slider-helper-functions

Range Slider

import { createRangeSlider } from '@3nvs/polyfront-slider';
const slider = createRangeSlider(0, 2000, 100);
document.body.appendChild(slider);
Enter fullscreen mode Exit fullscreen mode

Volume Control

import { createVolumeControl } from '@3nvs/polyfront-slider';
const volume = createVolumeControl(100);
volume.style.height = '200px';
document.body.appendChild(volume);
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

🎨 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);
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Supports dark mode and reduced motion.

🧪 Testing 

npm run test
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

📘 Storybook Demo 

npm run storybook
Enter fullscreen mode Exit fullscreen mode

📁 Folder Structure 

polyfront-slider/
├─ dist/          ← build output
├─ src/
├─ tests/
├─ stories/
├─ .storybook/
├─ .github/workflows/
├─ packages/
│  ├─ slider/
│  └─ slider-shim/
├─ LICENSE
├─ package.json
└─ README.md
Enter fullscreen mode Exit fullscreen mode

📦 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

Top comments (0)