solid-knobs
▸ Arc(props): Element
Arc is a simple utility component that returns a <path /> element for drawing an arc segment in an SVG element.
| Name | Type |
|---|---|
props |
ArcProps |
Element
▸ Control(props): Element
The Control component implements a higher-level control that covers the most common use cases and takes care of accessibility.
It uses ParameterGestureHandler under the hood and you should probably use Control instead of ParameterGestureHandler for most cases.
Example
import { Control } from 'solid-knobs';
...
<Control range={range} value={value()} onChange={setValue}>
// your custom control visualisation goes here
</Control>| Name | Type |
|---|---|
props |
ControlProps |
Element
▸ ImageStripControl(props): Element
Builds on top of the Control component, bringing easy-to-use support for image strip control graphics as generated by e.g. KnobMan.
| Name | Type |
|---|---|
props |
ImageStripControlProps |
Element
▸ ParameterGestureHandler(props): any
The ParameterGestureHandler component doesn't render anything itself, it simply wraps an existing element and makes it behave like a control by giving it the following abilities:
- Click and drag the element up/down to change the value.
- Scroll on top of the element to change the value.
- Hold shift while changing the value to change it more precisely.
- After focusing the element, the up/down/left/right arrow keys can be used to nudge the value by different increments.
It also takes care of blocking user selection on the page while dragging.
Example
import { ParameterGestureHandler } from 'solid-knobs';
...
<ParameterGestureHandler {...props}>
{ref =>
<div ref={ref}>
// custom visualisation code
</div>
}
</ParameterGestureHandler>| Name | Type |
|---|---|
props |
ParameterGestureHandlerProps |
any
▸ ValueInput(props): JSX.Element
A glorified input element that formats the value according to a range and properly handles user input.
| Name | Type |
|---|---|
props |
ValueInputProps |
JSX.Element
▸ createSmoothedValue(value, speed?, threshold?): Accessor<number>
A utility function that smoothly animates the changes of a numerical value.
Example
const [value, setValue] = createSignal(0.5);
const smoothedValue = createSmoothedValue(value);
createEffect(() =>
console.log(smoothedValue())
);| Name | Type | Default value | Description |
|---|---|---|---|
value |
() => number |
undefined |
The value to animate. |
speed |
number |
1 |
The relative speed at which to animate the value (optional, default = 1). |
threshold |
number |
0.001 |
How close the value has to be to the target for the animation to stop (optional, default = 0.001). |
Accessor<number>
A SolidJS signal that contains the animated value.
Ƭ Range: ContinuousRange | ChoiceRange
A Range specifies the range, scale, and UI behaviours of a controlled value.
There are two types of range: ContinuousRange and ChoiceRange.
• RangeType: Object
The type of a range.
Currently the only possible types are Continuous and Choice.
• ContinuousRange: Object
The most common type of range that is used for continuous numerical values (e.g. frequency, volume, etc).
• Scale: Object
The scaling of a ContinuousRange.
• ChoiceRange: Object
A range that represents a finite number of choices with textual labels (think enums).
• Choice: Object
Used by ChoiceRange.