🎛️ Meet Polyfront-Slider – Enterprise-Grade Web Component Slider

npm install @3nvs/polyfront-slider

npm install polyfront-slider

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

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

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'
});

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

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

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'));

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);

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);
}

npm run test

const el = new PolyfrontSlider();
el.setConfig({ min: 0, max: 100, step: 10, mode: 'range' });
el.setValue([20, 80]);
expect(el.getValue()).toEqual([20, 80]);

npm run storybook

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