# slider-before-after > 🔨 Lightweight and simple slider to present images in before / after style with no dependencies Latest version **1.0.4** (published 2025-01-20) · MIT license · 0 weekly downloads ## Install ```sh npm install slider-before-after pnpm add slider-before-after yarn add slider-before-after bun add slider-before-after ``` ## Health **Score 35/100 (D)** — status: stable. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: stale. ## Facts | | | |---|---| | Version | 1.0.4 | | Published | 2025-01-20 | | First published | 2018-11-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 7.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 13 | | Author | Piotr Kowalski | | Maintainers | piecioshka | | Keywords | slider, before, after, simple, customizable, powerful, lightweight, images, no dependencies | ## Links - npm: https://www.npmjs.com/package/slider-before-after - Repository: https://github.com/piecioshka/slider-before-after - Homepage: https://github.com/piecioshka/slider-before-after#readme - Issues: https://github.com/piecioshka/slider-before-after/issues - npm.io page: https://npm.io/package/slider-before-after ## Alternatives - [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads - [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads - [better](https://npm.io/package/better.md) — 42 weekly downloads - [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads - [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads ## Recent versions - 1.0.4 (latest) — 2025-01-20 - 1.0.3 — 2024-10-16 - 1.0.2 — 2024-10-16 - 1.0.1 — 2024-10-04 - 1.0.0 — 2018-11-16 ## README # slider-before-after [![node version](https://img.shields.io/node/v/slider-before-after.svg)](https://www.npmjs.com/package/slider-before-after) [![npm version](https://badge.fury.io/js/slider-before-after.svg)](https://badge.fury.io/js/slider-before-after) [![downloads count](https://img.shields.io/npm/dt/slider-before-after.svg)](https://www.npmjs.com/package/slider-before-after) [![size](https://packagephobia.com/badge?p=slider-before-after)](https://packagephobia.com/result?p=slider-before-after) [![license](https://img.shields.io/npm/l/slider-before-after.svg)](https://piecioshka.mit-license.org) 🔨 Lightweight and simple slider to present images in "before / after" style with no dependencies. ## Preview 🎉 or below: ![](./assets/demo.gif) ## Features - ✅ Display images in before / after style - ✅ Use CSS Level 4 (CSS Variables) - ✅ Small size of package - ✅ No dependencies - ✅ Fully customizable ## Usage Installation: ```bash npm install slider-before-after ``` In HTML structure: ```html

``` and then attach files: ```html ... ``` or in component: ```javascript require('slider-before-after/src/styles/main.css'); require('slider-before-after/src/styles/custom-range-input.css'); require('slider-before-after'); ``` ## License [The MIT License](https://piecioshka.mit-license.org) @ 2018 --- _Source: https://npm.io/package/slider-before-after · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._