SliderProps
Props of Slider: its value and range, colors, and the events of a drag.
Usage
Adjust volume and show its percentage
This type is used by Slider
import { Slider, Text, VStack, signal } from 'kuito';
export default function Volume() {
const volume = signal(0.5);
return (
<VStack gap={8} padding={16}>
<Slider label="Volume" value={volume} height={40} />
<Text>{Math.round(volume.value * 100) + '%'}</Text>
</VStack>
);
}Type declaration
export type SliderProps = {
/** Two-way when given a signal: the slider writes it as the user drags. */
value?: number;
/** 0 by default. */
min?: number;
/** 1 by default. */
max?: number;
/** The value snaps to multiples of `step` from `min`; 0 slides freely. */
step?: number;
disabled?: boolean;
/** The track before the thumb. */
fillColor?: string;
/** The track after the thumb. */
trackColor?: string;
/** The value, while the user drags. */
onChange?: (value: number) => void;
/** When the user lets go. */
onChangeEnd?: (event: SliderEvent) => void;
};Members 9
| Name | Type | Required | Description |
|---|---|---|---|
value | number | No | Two-way when given a signal: the slider writes it as the user drags. |
min | number | No | 0 by default. |
max | number | No | 1 by default. |
step | number | No | The value snaps to multiples of step from min; 0 slides freely. |
disabled | boolean | No | — |
fillColor | string | No | The track before the thumb. |
trackColor | string | No | The track after the thumb. |
onChange | (value: number) => void | No | The value, while the user drags. |
onChangeEnd | (event: SliderEvent) => void | No | When the user lets go. |
onChange — method signatures
Signatures
(value: number): voidParameters
| Name | Type | Required | Description |
|---|---|---|---|
value | number | Yes | — |
Returns
void
onChangeEnd — method signatures
Signatures
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.