Adjust one or more numeric values with keyboard support.
import { useState } from 'react';
import { Slider } from '@vrum/ui';
export default function Demo() {
const [value, setValue] = useState([45]);
return (
<Slider
value={value}
min={0}
max={100}
step={1}
disabled={false}
label={"Project progress"}
onValueChange={setValue}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
name | string | none | name configuration. |
disabled | boolean | none | Disable user interaction. |
orientation | Orientation | none | orientation configuration. |
dir | Direction | none | dir configuration. |
min | number | none | min configuration. |
max | number | none | max configuration. |
step | number | none | step configuration. |
minStepsBetweenThumbs | number | none | min steps between thumbs configuration. |
preserveThumbOrder | boolean | none | When `true`, thumbs keep their relative order and won't cross over one another while dragging. Each thumb is constrained to the values of its neighbors instead of swapping positions when dragged past them. |
value | number[] | none | Controlled value; connect the callback to application state. |
defaultValue | number[] | [50] | Initial value for an uncontrolled component. |
onValueChange | ((value: number[]) => void) | none | Called when the selected value changes. |
onValueCommit | ((value: number[]) => void) | none | on value commit configuration. |
inverted | boolean | none | inverted configuration. |
form | string | none | form configuration. |
asChild | boolean | none | as child configuration. |
defaultChecked | boolean | none | default checked configuration. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |
label | string | "Value" | Visible or accessible label. |