# BeerSlider
## A vanilla JavaScript accessible before-after slider
### Demo
You can find [the demo here](https://pepsized.com/wp-content/uploads/2018/09/beerslider/demo/index.html).
## How?
## Installation
The ```dist``` folder contains the ready for production minified files: ```BeerSlider.js``` and ```BeerSlider.css```
```html
...
```
You can also use the cdn solution
```html
...
```
#### npm:
```bash
npm install beerslider
```
## Usage:
The basic markup is:
```html
```
The data-beer-labels are optional, you can leave them empty or do not add them at all.
To activate the slider add the following:
```js
new BeerSlider(document.getElementById('slider'));
```
### Customization
You can initiate BeerSlider with some options, the available options are:
```js
{
// start value
start: '50',
// prefix
prefix: 'beer'
}
```
### Use with jQuery or Zepto
If you use jQuery or Zepto in your project and have a few before-after sliders on your page, you can do something like that:
```html
```
or:
```html
```
with:
```html
```
A Codepen demo using jQuery is available [here,](https://codepen.io/pehaa/pen/PdJqPE)
and Zepto [here.](https://codepen.io/pehaa/pen/EebMgg)
