{"_id":"@arc-lang/arc-sliders","name":"@arc-lang/arc-sliders","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@arc-lang/arc-sliders","version":"0.1.0","description":"CSS scroll-snap carousel, before/after comparison slider, and enhanced infinite marquee. CSS-first, ~700B optional JS, zero dependencies.","main":"index.css","style":"index.css","exports":{".":"./index.css","./src/*":"./src/*","./js/*":"./js/*"},"repository":{"type":"git","url":"git+https://github.com/arc-language/arc-sliders.git"},"homepage":"https://github.com/arc-language/arc-sliders#readme","bugs":{"url":"https://github.com/arc-language/arc-sliders/issues"},"author":{"name":"Arc contributors"},"engines":{"node":">=18.0.0"},"scripts":{"lint":"npx stylelint \"src/*.css\"","validate":"node -e \"require('fs').readdirSync('src').forEach(f => { if(f.endsWith('.css')) console.log('✓', f) })\""},"keywords":["css","slider","carousel","scroll-snap","comparison","before-after","marquee","ticker","infinite-scroll","swiper","slideshow","image-comparison","css-carousel","css-only","zero-dependencies","arc","arc-language","scroll-driven","css-scroll-snap","vanilla-js"],"license":"MIT","sideEffects":true,"publishConfig":{"access":"public","provenance":false},"gitHead":"c665a5a1487523ec35020bb46bd0b215b20c1b4e","_id":"@arc-lang/arc-sliders@0.1.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-XxfrD1yMWLePGRcu+Gi2iIvgH0lJ+bnvOL2B+flkePzXfg1DAu18keqod3RgbuThT/J6OVX6wxRVN5xyK6l+tA==","shasum":"897c0ed63afcdfc4b1eeca07e7ef840aad6396a1","tarball":"https://registry.npmjs.org/@arc-lang/arc-sliders/-/arc-sliders-0.1.0.tgz","fileCount":16,"unpackedSize":49773,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICmow9iGMCYmAhV8QKBDWUtIzb/h6VIfJd9fX1n8PwujAiANuFOIzAMwKc8G0HR+O7a4ebzJdi8n4UUWCoLOu1mEIQ=="}]},"_npmUser":{"name":"kobecuppens","email":"kobecuppens@hotmail.com"},"directories":{},"maintainers":[{"name":"kobecuppens","email":"kobecuppens@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/arc-sliders_0.1.0_1779982278177_0.13361983290967827"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-28T15:31:17.977Z","0.1.0":"2026-05-28T15:31:18.343Z","modified":"2026-05-28T15:31:18.638Z"},"maintainers":[{"name":"kobecuppens","email":"kobecuppens@hotmail.com"}],"description":"CSS scroll-snap carousel, before/after comparison slider, and enhanced infinite marquee. CSS-first, ~700B optional JS, zero dependencies.","homepage":"https://github.com/arc-language/arc-sliders#readme","keywords":["css","slider","carousel","scroll-snap","comparison","before-after","marquee","ticker","infinite-scroll","swiper","slideshow","image-comparison","css-carousel","css-only","zero-dependencies","arc","arc-language","scroll-driven","css-scroll-snap","vanilla-js"],"repository":{"type":"git","url":"git+https://github.com/arc-language/arc-sliders.git"},"author":{"name":"Arc contributors"},"bugs":{"url":"https://github.com/arc-language/arc-sliders/issues"},"license":"MIT","readme":"# arc-sliders\n\n[![components](https://img.shields.io/badge/components-5-blueviolet)](https://github.com/arc-language/arc-sliders)\n[![JS size](https://img.shields.io/badge/JS-~1KB%20optional-brightgreen)](https://github.com/arc-language/arc-sliders)\n[![dependencies](https://img.shields.io/badge/dependencies-0-brightgreen)](https://github.com/arc-language/arc-sliders)\n[![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)\n[![Part of Arc](https://img.shields.io/badge/Part%20of-Arc-5956f0)](https://arc-language.dev)\n\nFive CSS-first UI slider components. CSS drives everything — the optional JS (~1KB total) adds interactivity only where CSS alone cannot.\n\n> **Part of [Arc](https://arc-language.dev)** — the zero-dependency web framework.\n\n## Install\n\n```bash\nnpm install arc-sliders\n```\n\n**CDN:**\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/arc-sliders/index.css\">\n```\n\n---\n\n## Components\n\n### Carousel\n\nCSS scroll-snap carousel. Works without JS — users can swipe and scroll natively. Add `js/carousel.js` for prev/next buttons and dot sync.\n\n```html\n<div class=\"carousel\" style=\"--slides-visible: 2; --carousel-gap: 16px;\">\n  <div class=\"carousel__track\">\n    <div class=\"carousel__slide\">Slide 1</div>\n    <div class=\"carousel__slide\">Slide 2</div>\n    <div class=\"carousel__slide\">Slide 3</div>\n  </div>\n  <button class=\"carousel__prev\">&#8592;</button>\n  <button class=\"carousel__next\">&#8594;</button>\n  <div class=\"carousel__dots\">\n    <button class=\"carousel__dot is-active\"></button>\n    <button class=\"carousel__dot\"></button>\n    <button class=\"carousel__dot\"></button>\n  </div>\n</div>\n<script src=\"https://unpkg.com/arc-sliders/js/carousel.js\"></script>\n```\n\n| Modifier | Effect |\n|----------|--------|\n| `.carousel--peek` | Reveals edge of next slide (set `--carousel-peek`) |\n| `.carousel--fade` | Fades track edges with `mask-image` |\n| `.carousel--vertical` | Vertical scroll-snap (set `--carousel-height`) |\n| `.carousel--crossfade` | Crossfade between slides (opacity transition, no scroll) |\n| `.carousel--loop` | True infinite loop — no content duplication needed |\n\n**Infinite loop:** Add `.carousel--loop` — JS clones the minimum number of edge slides needed to fill one viewport, then uses `scrollend` to silently reset position when the user reaches a clone. Requires no content duplication in HTML. Requires `scrollend` event support (Chrome 114+, Firefox 109+, Safari 17.4+).\n\n**Autoplay:** Add `data-autoplay=\"3000\"` for 3s auto-advance. Pauses on hover/focus, skipped if `prefers-reduced-motion` is active. Works with `.carousel--loop`.\n\n```html\n<div class=\"carousel\" data-autoplay=\"4000\">...</div>\n```\n\n| CSS property | Default | Description |\n|---|---|---|\n| `--slides-visible` | `1` | How many slides show at once |\n| `--carousel-gap` | `0px` | Gap between slides |\n| `--carousel-peek` | `0px` | How much of the next slide to reveal |\n| `--carousel-height` | `400px` | Height for vertical and crossfade carousels |\n| `--carousel-crossfade-duration` | `0.5s` | Transition duration for `.carousel--crossfade` |\n| `--carousel-dot-color` | `rgba(0,0,0,0.25)` | Inactive dot color |\n| `--carousel-dot-active` | `#000` | Active dot color |\n\n---\n\n### Comparison\n\nBefore/after image reveal. Drag the handle or use arrow keys to compare. JS sets `--comparison-split`; CSS drives the entire visual via `clip-path`.\n\n```html\n<div class=\"comparison\" style=\"height: 400px;\">\n  <img class=\"comparison__before\" src=\"before.jpg\" alt=\"Before\">\n  <img class=\"comparison__after\" src=\"after.jpg\" alt=\"After\">\n  <div class=\"comparison__handle\"></div>\n  <span class=\"comparison__label-before\">Before</span>\n  <span class=\"comparison__label-after\">After</span>\n</div>\n<script src=\"https://unpkg.com/arc-sliders/js/comparison.js\"></script>\n```\n\n| CSS property | Default | Description |\n|---|---|---|\n| `--comparison-split` | `50%` | Divider position (set by JS on drag) |\n| `--comparison-handle-color` | `#fff` | Handle line and knob color |\n| `--comparison-handle-size` | `44px` | Knob diameter |\n\n**Accessibility:** Keyboard navigable (arrow keys ±5%), `role=\"slider\"`, `aria-valuenow` — all added automatically by `js/comparison.js`.\n\n---\n\n### Marquee\n\nEnhanced infinite scrolling ticker. Duplicate content inside `.marquee__track` for a seamless loop.\n\n```html\n<div class=\"marquee marquee--pause-hover marquee--fade\">\n  <div class=\"marquee__track\">\n    <span class=\"marquee__item\">Item <span class=\"marquee__sep\"></span></span>\n    <span class=\"marquee__item\">Item <span class=\"marquee__sep\"></span></span>\n    <!-- duplicate for seamless loop -->\n    <span class=\"marquee__item\">Item <span class=\"marquee__sep\"></span></span>\n    <span class=\"marquee__item\">Item <span class=\"marquee__sep\"></span></span>\n  </div>\n</div>\n```\n\n| Modifier | Effect |\n|----------|--------|\n| `.marquee--reverse` | Scrolls right instead of left |\n| `.marquee--pause-hover` | Pauses on hover (opt-in) |\n| `.marquee--slow` | 40s duration |\n| `.marquee--fast` | 10s duration |\n| `.marquee--fade` | Fades left/right edges |\n| `.marquee--vertical` | Vertical scrolling |\n\n| CSS property | Default | Description |\n|---|---|---|\n| `--marquee-duration` | `20s` | Animation speed |\n| `--marquee-gap` | `2rem` | Gap between items |\n\n---\n\n### Range\n\nStyled `<input type=\"range\">` — single or dual handle. CSS custom properties control colors and sizing; JS (`js/range.js`) syncs the fill bar and prevents handles from crossing in dual mode.\n\n```html\n<!-- Single handle -->\n<div class=\"range\">\n  <input type=\"range\" min=\"0\" max=\"100\" value=\"40\">\n</div>\n\n<!-- Dual handle -->\n<div class=\"range range--dual\">\n  <input type=\"range\" min=\"0\" max=\"100\" value=\"20\">\n  <input type=\"range\" min=\"0\" max=\"100\" value=\"80\">\n</div>\n<script src=\"https://unpkg.com/arc-sliders/js/range.js\"></script>\n```\n\n| CSS property | Default | Description |\n|---|---|---|\n| `--range-track-height` | `4px` | Track thickness |\n| `--range-thumb-size` | `18px` | Thumb diameter |\n| `--range-color` | `#3b82f6` | Thumb + fill color |\n| `--range-track-color` | `#e2e8f0` | Unfilled track color |\n| `--range-track-fill` | `var(--range-color)` | Fill bar color (override separately) |\n\n---\n\n### Scroll progress + fade-in-view\n\nPure CSS, zero JS. Uses `animation-timeline: scroll()` and `animation-timeline: view()`.\n\n**Browser support:** Chrome 115+, Firefox 114+, Safari 18+. Graceful fallback: bar invisible, content visible.\n\n```html\n<!-- Reading progress bar (place once near top of <body>) -->\n<div class=\"scroll-progress\"></div>\n\n<!-- Reveal element as it enters the viewport -->\n<div class=\"fade-in-view\">Any content</div>\n```\n\n| CSS property | Default | Description |\n|---|---|---|\n| `--scroll-progress-height` | `3px` | Progress bar height |\n| `--scroll-progress-color` | `#3b82f6` | Progress bar color |\n\n---\n\n## Tree-shaking\n\nImport only what you need:\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/arc-sliders/src/base.css\">\n<link rel=\"stylesheet\" href=\"https://unpkg.com/arc-sliders/src/marquee.css\">\n```\n\n| File | Size (approx) |\n|------|---------------|\n| `src/base.css` | ~0.5 KB |\n| `src/carousel.css` | ~2 KB |\n| `src/comparison.css` | ~1.5 KB |\n| `src/marquee.css` | ~1.5 KB |\n| `src/range.css` | ~1.5 KB |\n| `src/scroll.css` | ~0.5 KB |\n| `js/carousel.js` | ~600 B |\n| `js/comparison.js` | ~400 B |\n| `js/range.js` | ~300 B |\n| Full bundle | ~7.5 KB CSS + ~1.3 KB JS |\n\n---\n\n## Browser support\n\n| Feature | Chrome | Firefox | Safari | Edge |\n|---------|--------|---------|--------|------|\n| Carousel (scroll-snap) | 69+ | 68+ | 11+ | 79+ |\n| Comparison (clip-path) | 55+ | 54+ | 9.1+ | 79+ |\n| Marquee (CSS animations) | 43+ | 16+ | 9+ | 79+ |\n| Marquee fade (mask-image) | 120+ | — | 15.4+ | 120+ |\n| Range (input styling) | 4+ | 23+ | 4+ | 12+ |\n| Scroll progress (animation-timeline) | 115+ | 114+ | 18+ | 115+ |\n| Fade-in-view (animation-timeline) | 115+ | 114+ | 18+ | 115+ |\n\n---\n\n## Accessibility\n\n- **`prefers-reduced-motion`**: marquee pauses; carousel `scroll-behavior` collapses to instant; carousel autoplay is skipped; crossfade is instant; scroll progress shows static\n- **Comparison slider**: keyboard navigable (←/→ keys ±5%), `role=\"slider\"`, `aria-valuenow` — added automatically by the JS\n- **Carousel buttons**: standard `<button>` elements, keyboard-focusable\n- **Range inputs**: native `<input type=\"range\">` semantics — full keyboard, screen reader, and platform accessibility built in\n- **Focus ring**: comparison container gets `:focus-visible` ring (2px, `#5956f0`)\n\n---\n\n## License\n\n[MIT](LICENSE) © Arc contributors\n","readmeFilename":"README.md","_rev":"1-3f5e33d7a695ac6b5c1b9698db9e9e13"}