# img-comparison-slider Slider component to compare images before and after. [](https://www.npmjs.com/package/img-comparison-slider) [](https://www.webcomponents.org/element/img-comparison-slider) [](https://stenciljs.com) ## Browsers support | [](http://godban.github.io/browsers-support-badges/)
IE / Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](http://godban.github.io/browsers-support-badges/)
iOS Safari | [](http://godban.github.io/browsers-support-badges/)
Samsung | | --------- | --------- | --------- | --------- | --------- | --------- | | IE11 *([limited](docs/ie.md))*, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions ## Overview This is the best comparison slider because it: * Looks great on mobile devices * Supports keyboard * Responsive * Works with plain HTML pages, React, Angular, or Vue * Easy to install * Lightweight ~7kb * Zero dependencies ## Installation ### HTML ```html ``` ### Frameworks support * [React](docs/installation/react.md) * [Angular](docs/installation/angular.md) * [Vue](docs/installation/vue.md) ## Styling The component could be styled with the help of CSS3 variables. Example: ```html ``` ### Available variables | Variable | Description | Default value | | --- | --- | --- | | `--divider` | Vertical line dividing before and after image | `1px solid #d7d7d7` | | `--hint-size` | Size of hint arrows at the middle of divider | `40px` | | `--hint-color` | Color of hint arrows at the middle of divider | `#d7d7d7` | | `--hint-opacity` | Opacity of hint arrows | `0.5` | | `--hint-opacity-active` | On focus opacity of hint arrows | `0` |