https://github.com/muhammadmabrouk/webrouk-custom-range
Webrouk Custom Range is a lightweight native JavaScript web component for custom range slider element.
https://github.com/muhammadmabrouk/webrouk-custom-range
Last synced: over 1 year ago
JSON representation
Webrouk Custom Range is a lightweight native JavaScript web component for custom range slider element.
- Host: GitHub
- URL: https://github.com/muhammadmabrouk/webrouk-custom-range
- Owner: MuhammadMabrouk
- License: mit
- Created: 2022-02-06T03:13:10.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-04T21:40:12.000Z (almost 4 years ago)
- Last Synced: 2025-02-27T10:10:53.396Z (over 1 year ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webroukCustomRange
Webrouk Custom Range Slider is a lightweight native JavaScript web component for custom range slider element.
- No dependencies
- Small and fast
- Fully responsive
- Support touch-devices (Android, iOS, Nexus, etc.)
- Prefixes and suffixes for your numbers ($100, 100k etc.)
- Slider writes its value right into input value field. This makes it easy to use in any html form
### Demo
---
[CodePen Example](https://codepen.io/muhammad_mabrouk/full/eYGoBMb/)
### Installation
---
Use [NPM](https://www.npmjs.com/package/webrouk-custom-range/) to download and install it directly in to your project
```sh
$ npm install webrouk-custom-range --save
```
or include js file manually
```html
```
### Usage
---
Using webroukCustomRange is simple. Configuration over attributes.
```html
```
### Options
| Option | Type | Description | Default |
| ----------- | :----: | ----------- | :----: |
| start | `number` | Set slider minimum value | `0` |
| end | `number` | Set slider maximum value | `100` |
| from | `number` | Set start position for left handle | `start` |
| to | `number` | Set start position for right handle | `end` |
| prefix-char | `string` | Set prefix for values. Will be set up right before the number: **$** 100 | `''` |
| suffix-char | `string` | Set suffix for values. Will be set up right after the number: 100 **k** | `''` |
### Style Customization
---
Expected CSS Variables from inside the component (optional).
```css
webrouk-custom-range {
--w-primary-color: hsl(218, 95%, 54%);
--w-text-color: hsl(0, 100%, 100%);
--w-line-color: hsl(0, 0%, 93%);
}
```
### Styleable Component Parts
---
- root
- value-start
- value-end
- value-from
- value-to
- value-single
- handle
- handle-lower
- handle-upper
#### Example:
```css
webrouk-custom-range::part(value-start) {
background-color: cornflowerblue;
}
webrouk-custom-range::part(value-end) {
background-color: indianred;
}
webrouk-custom-range::part(value-from),
webrouk-custom-range::part(value-to) {
background-color: blueviolet;
}
webrouk-custom-range::part(value-single) {
background-color: seagreen;
}
```
### License
-------
webroukCustomRange is licensed [MIT](https://choosealicense.com/licenses/mit/).
It can be used for free and without any attribution, in any personal or commercial project.