# aesth-vue-range-input
a completely customizable and aesthetic range input component for vue.
## Table of Contents
1. [Features](#features)
2. [Installation](#installation)
3. [Usage](#usage)
4. [Range Input Components](#range-input-components)
5. [Props](#props)
6. [License](#license)
## Features
- supports all native range input attributes because it is built on the native HTML range input.
- completely customizable.
- minimal design.
- implements buffered feature (appropriate for media players).
## Installation
For vue 3, include the `@next` tag like this - `...aesth-vue-range-input@next`
### npm
```shell
npm install aesth-vue-range-input
```
### yarn
```shell
yarn add aesth-vue-range-input
```
### CDN
#### jsDelivr
```xml
```
#### UNPKG
```xml
```
## Usage
If installed through npm or yarn,
```vue
```
Include the version number of vue in the value of the script's `src` attribute.
If installed through CDN, in your HTML file,
```xml
```
### Demo
A Demo of the aesth-vue-range-input installed through jsDelivr is available [here](https://codepen.io/idorenyinudoh/pen/KKqLbEy).
## Range Input Components
- **progress**: The section to the left of the thumb. This section consists of values lower than the current value as indicated by the thumb.
- **thumb**: The knob that the user can utilize to alter the range input's value.
- **track**: The section that the thumb slides on.
## Props
All the props are optional.
| Prop | Description | Type | Default |
|-------------|-------------|-------------|-------------|
| `max` | the greatest value in the range of permitted values | Number | 100 |
| `value` | the value of the range input (make sure to include the `.number` modifier on the `v-model` directive) | Number | 0 |
| `rangeWidth` | the width of the range input | String | 100% |
| `progressColor` | the color of the range input's progress section (the `v-model` directive has to be present for this to be visible on webkit browsers) | String | #000c |
| `trackColor` | the color of the range input's track | String | #0003 |
| `squaredThumb` | boolean specifying whether the range input's thumb should be in a square or circle shape | Boolean | false |
| `thumbBorderColor` | the color of the thumb's border | String | #000 |
| `thumbSize` | the `width` and `height` CSS properties of the range input's thumb | String | 20px |
| `buffered` | an object containing the `width` and `color` of the buffered section | Object | `undefined` |
Here's an implementation with the `buffered` prop:
```vue
```
# License
[MIT](https://opensource.org/licenses/MIT)
© Idorenyin Udoh