Forem: Nirmal Samaranayaka

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

Nirmal Samaranayaka — Sat, 01 Nov 2025 23:31:34 +0000

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

Scaffold React & Angular Apps in Minutes — Meet polyfront scaffold 🚀

Nirmal Samaranayaka — Sat, 06 Sep 2025 02:32:37 +0000

I’m excited to share my new open-source CLI tool: polyfront-scaffold!

After weeks of building and testing, this tool helps you scaffold modern React (Vite/Webpack) and Angular applications in minutes, with ready-to-use presets for UI, state management, testing, and more.

🎯 What It Does

polyfront-scaffold generates production-ready frontend projects with opinionated but flexible defaults. Instead of wiring boilerplate, teams can focus on building features.

Key Highlights

Frameworks supported: React (Vite/Webpack) & Angular
UI stacks: MUI, Bootstrap, Tailwind, Ant Design, Chakra, Angular Material
State management (React): Redux, MobX, React Query, or none
Built-in utilities: HTTP clients, i18n placeholders, date libraries (moment/dayjs/date-fns), and testing setup (Jest, Vitest, Cypress, Playwright)
Folder structure: Clean, scalable, with .env presets
Cross-platform: Works on Windows, macOS, Linux
Node support: Fully tested on Node 20 & 22

🖼️ Screenshots & Demo

MUI

Bootstrap

Tailwind

Ant Design

Chakra UI Design

⚡ Quick Start

Install globally

npm install -g polyfront-scaffold

Interactive wizard

polyfront-scaffold --interactive

Scaffold a React + Vite + MUI project

polyfront-scaffold my-app --framework react-vite --ts --ui mui --store none --test-unit vitest --test-e2e none

👥 Who Is This For?

*Solo developers & freelancers → Skip repetitive boilerplate, build faster.
*Startup teams → Enforce consistent structure across multiple apps.
*Enterprise developers → Standardize scaffolding for large teams & speed onboarding.
*Educators & trainers → Spin up demo projects for workshops or bootcamps.

⏱️ Why Use It?

Without polyfront-scaffold ⌛: ~30+ minutes setup

npx create-react-app ...
npm install mui redux react-router ...
mkdir src/components ...
touch src/pages/Home.tsx ...

With polyfront-scaffold 🚀: <1 minute 🎉

polyfront-scaffold my-app --framework react-vite --ts --ui mui --store none --test-unit vitest --test-e2e none

💡 Community Contributions

Experimental presets (AntD) welcome for testing.
Open issues, submit PRs, or give feedback via GitHub.

📦 Try It Today

👉 npm : polyfront-scaffold
👉 GitHub Repo

⭐ Star the repo if you find it useful!

Try polyfront-scaffold today and give your productivity a boost ⚡

#react #angular #frontend #opensource #cli #mui #bootstrap