https://github.com/melihaltintas/svelte-knob
https://github.com/melihaltintas/svelte-knob
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/melihaltintas/svelte-knob
- Owner: MelihAltintas
- Created: 2021-01-03T18:39:07.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-25T21:38:35.000Z (over 4 years ago)
- Last Synced: 2025-03-29T00:06:43.924Z (6 months ago)
- Language: Svelte
- Size: 28.3 KB
- Stars: 35
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-knob
Knob control for Svelte.js
## Install
```shell
npm install svelte-knob --save
```
## Demo
https://svelte.dev/repl/609b8f2e4540442197fc12cbc4165d55?version=3.31.1
[](https://github.com/MelihAltintas/svelte-knob/stargazers)
[](https://github.com/MelihAltintas/svelte-knob/network/members)
## Usage
```javascript
import Knob from 'svelte-knob'
```
## Examples
Most basic usage:
```html
```
## Responsive
> Set the component responsive.
> Size property is always available, be careful if size is more than 100, size is expressed in % in this mode
```html
```
## Animation:
> Disabled by default
`animated` true|false
This will disable/enable knob animation but not value one.
`animateValue` true|false
Same as `animation` expect for the value.
`animationDuration` integer, in milliseconds
set the duration of both animation.
`animationFunction` string
CSS animation function, all CSS animations are available (eg: linear, ease-in, ease-out, ...).
### Examples
> Only animate knob itself
```html
```
> Only animate knob value
```html
```
_`animated` and `animateValue` can be set at the same time_
> This animation use `CSS linear function` during 5 sec
```html
```
_`animationDuration` should be expressed in ms (you can use multiplication if you prefer eg: "5 * 1000")_
## Properties
The only required property is `value`.
Option | Type | Description | Default
-------|------|-------------|--------
value | Number | Use the value attribute to set the value of the control | none
max | Number | Maximum value of the control | 100
min | Number | Minimum value of the control | 0
step | Number | Smallest increment the value can change by | 1
disabled | Boolean | Set to true to disable the knob | false
size | Number | Visual size of the control in `px` (or `%` if `responsive` is `true`) | 100
primaryColor | String | Color of the value arc | #409eff
secondaryColor | String | Color of the rest of the control | #dcdfe6
textColor | String | Color of the value text | #000000
strokeWidth | Number | Thickness of the arcs | 17
valueDisplayFunction | Function | Custom function to alter the display text | `(v) => v`
responsive | Boolean | Use `%` instead of `px` | false
animation | Object | Optional animation config object: `{ animated: false, animateValue: false, animationDuration: 2000 (in ms), animationFunction: 'ease-in-out' }` | null