npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

svelte-knob

v1.0.2

Published

Knob control for Svelte.js

Downloads

37

Readme

svelte-knob

Knob control for Svelte.js

Install

npm install svelte-knob --save

Demo

https://svelte.dev/repl/609b8f2e4540442197fc12cbc4165d55?version=3.31.1

Usage

import Knob from 'svelte-knob'

Examples

Most basic usage:

<Knob value={50} />
<Knob value={30} step={10} strokeWidth={8} primaryColor="#E844C3" secondaryColor="#E7B6DC" textColor="#E844C3"/>
<Knob value={45} min={-10} max={100} />

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

<Knob
    responsive={true}
/>

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

<Knob
    animation="{
        animated: true
    }"
/>

Only animate knob value

<Knob
    animation="{
        animateValue: true
    }"
/>

animated and animateValue can be set at the same time

This animation use CSS linear function during 5 sec

<Knob
    animation="{
        animated: true,
        animateValue: true,
        animationDuration: '5000',
        animationFunction: 'linear'
    }"
/>

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