Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/orderandch4os/log-slider
JS log scaling slider
https://github.com/orderandch4os/log-slider
html javascript log-slider range-input vanilla-javascript vanilla-js
Last synced: about 15 hours ago
JSON representation
JS log scaling slider
- Host: GitHub
- URL: https://github.com/orderandch4os/log-slider
- Owner: OrderAndCh4oS
- Created: 2020-03-09T20:48:55.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-06T11:08:53.000Z (over 1 year ago)
- Last Synced: 2024-05-03T10:31:37.286Z (8 months ago)
- Topics: html, javascript, log-slider, range-input, vanilla-javascript, vanilla-js
- Language: CSS
- Homepage: https://OrderAndCh4oS.github.io/log-slider/
- Size: 1.94 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# log-slider
https://OrderAndCh4oS.github.io/log-slider/
## Setup
### CDN
Include these in your HTML somewhere (update the version number if a new version is available).
*script*
``
*stylesheet*
``
## Examples
### Log scale slider
*js*
```javascript
const handleDemoLogUpdate = (log, value) => {
console.log(log, value);
};
const demoLog = new LogSlider({
id: 'log-scale',
min: 100,
max: 10000,
type: sliderTypes.LOG,
showTab: true,
callback: handleDemoLogUpdate,
});
```
*html*
```html
```
### Linear scale slider
*js*
```javascript
const handleDemoLinearUpdate = (value) => {
console.log(value);
};
const demoLinear = new LogSlider({
id: 'linear-scale',
min: 1,
max: 1000,
showTab: true,
callback: handleDemoLinearUpdate,
});
```
*html*
```html
```
### Linear scale slider with steps
*js*
```javascript
const handleDemoLinearUpdate = (value) => {
console.log(value);
};
const demoLinearStepped = new LogSlider({
id: 'linear-scale',
min: 1,
max: 100,
type: sliderTypes.LINEAR,
steps: [1, 10, 25, 50, 100],
showTab: true,
callback: handleDemoLinearUpdate,
});
```
*html*
```html
```
## Examples Using HTML Attributes
### Linear scale slider with steps
*html*
```html
Linear Scale
```
*js*
```javascript
const demoLinear = new LogSlider({
id: 'linear-scale',
callback: (value) => {console.log(value)},
});
```
### Log scale slider
*html*
```html
Log Scale
```
*js*
```javascript
const demoLog = new LogSlider({
id: 'log-scale',
callback: (log) => {console.log(log)},
});
```