# @creenv/slider

> A simple slider, used by @creenv/gui

Latest version **1.0.6** (published 2018-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @creenv/slider
pnpm add @creenv/slider
yarn add @creenv/slider
bun add @creenv/slider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2018-10-16 |
| First published | 2018-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Baptiste Crespy |
| Maintainers | bcrespy |
| Keywords | creenv, slider |

## Links

- npm: https://www.npmjs.com/package/@creenv/slider
- Repository: https://github.com/bcrespy/creenv-slider
- Homepage: https://github.com/bcrespy/creenv-slider.git
- Issues: https://github.com/bcrespy/creenv-slider/issues
- npm.io page: https://npm.io/package/@creenv/slider

## Dependencies (1)

- [@creenv/inject-css](https://npm.io/package/@creenv/inject-css.md) 0.0.1

## Alternatives

- [replicas-cli](https://npm.io/package/replicas-cli.md) — 3.0K weekly downloads
- [env-contract](https://npm.io/package/env-contract.md) — 133 weekly downloads
- [@openveo/api](https://npm.io/package/@openveo/api.md) — 61 weekly downloads
- [@ryniaubenpm2/cumque-error-reiciendis](https://npm.io/package/@ryniaubenpm2/cumque-error-reiciendis.md) — 54 weekly downloads
- [ts-global-type-extra](https://npm.io/package/ts-global-type-extra.md) — 11 weekly downloads

## Recent versions

- 1.0.6 (latest) — 2018-10-16
- 1.0.5 — 2018-10-09
- 1.0.4 — 2018-10-09
- 1.0.3 — 2018-10-08
- 1.0.2 — 2018-10-08
- 1.0.1 — 2018-10-08
- 1.0.0 — 2018-10-08

## README

# Creenv slider

A simple and fully customizable slider, in native javascript. No need for complexity.

## Usage

```js
var Slider = require("@creenv/slider");

var callbackChange = function (val) {
  console.log("value has changed: "+val);
}

var callbackChangeFinished = function (val) {
  console.log("user has finished sliding: "+val);
}

var mySlider = new Slider(0, 100, 0.5, 10, callbackChange, callbackChangeFinished);
document.body.appendChild(mySlider.dom);
```

## Custom the style 

The css of the slider will be inserted into the < head > tags, within < style > tags identified by `id="creenv-slider-style"`, right at the beginning. You can overwrite any of these rules to apply you own rules. Only 3 classes are used by @creenv/slider:

| Class | What ? |
|---|---|
| *.creenv-slider-container* | The container of the whole slider. Its background-color will be the background color of the slider |
| *.creenv-slider-progress* | The progress bar. Its width will be programatically set to match the value of the slider |
| *.creenv-slider-cursor* | The draggable cursor |

## Constructor 

**Slider**(*min*: **number**, *max*: **number**, *step*: **number**, *value*: **number**, *callbackChange*: **function**, *callbackChangeFinished*: **function**, *vertical*: **boolean**)

| Parameter | Type | What? | Default value |
| --- | --- | --- | --- |
| *min* | **number** | The left value of the slider | *0* |
| *max* | **number** | The right value of the slider | *100* |
| *step* | **number** | Step between each possible value | *0.5* |
| *value* | **number** | Default value the slider can take | *10* |
| *callbackChange* | **function** | Callback function called when a change is detected to the value. Set it to *undefined* if you don't want any action | `()=>{}` |
| *callbackChangeFinished* | **function** | Callback function called when the user is done sliding. Will only be triggered when mouseclick is released. Set it to *undefined* if you don't want any action | `()=>{}` |
| *vertical* | **bolean** | If set to true, the slider will be vertical. It will need a container which height will be the desired slider's height | *false* |

## Accessible (read/write) class members 

| Member | Type | What ? |
|---|---|---|
| *.value* | **number** | Current value of the slider |
| *.min* | **number** | The left value of the slider |
| *.max* | **number** | The right value of the slider |
| *.step* | **number** | The step between each possible value |
| *.onChange* | **function** | Called when value changes because of user input |
| *.onChangeFinished* | **function** | Called when value change is finished |
| *.dom* | **HTMLElement** | The dom element representing the entire slider component |
| *.x* | **number** | X Offset of the slider, from the left of the window. If vertical is set to true, Y of the slider |
| *.width* | **number** | Width, in px, of the slider. If *vertical* is set to true, height of the slider |
| *.container* | **HTMLElement** | DOM element of the container (=.dom) |
| *.progress* | **HTMLElement** | DOM element of the progress bar inside the container |
| *.cursor* | **HTMLElement** | DOM element of the cursor inside the container |

---
_Source: https://npm.io/package/@creenv/slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._