Slider
Ranged slider input component
import { Slider } from '@ensdomains/thorin'
<Slider label="slider" />
name | type | default | description |
|---|---|---|---|
defaultValue | string | number | - | The initial value. Useful for detecting changes in value. |
description | ReactNode | - | Description text or react component. |
disabled | boolean | - | If true, prevents user interaction. |
error | ReactNode | - | Error text or a react component. |
hideLabel | boolean | - | If true, hides the label and secondary label. |
id | string | - | The id attribute of input. |
inline | boolean | - | If true, moves the label and status messages to the right of the content. |
label* Required | ReactNode | - | Label text or react component |
labelSecondary | ReactNode | - | Secondary text or react component |
max | number | 100 | The max value of slider. |
min | number | 1 | The min value of slider. |
name | string | - | The name attribute of input. |
readOnly | boolean | - | If true, will set the Fields component to read only mode
The readOnly attribute of input. |
ref | null | string | (instance: HTMLInputElement | null) => void | RefObject<HTMLInputElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
required | boolean | - | Adds mark to label |
reverse | boolean | - | Have label appear on the left of the form element. |
tabIndex | number | - | The tabindex attribute of input. |
value | number | - | The value attribute of slider. |
width | any | - | A tokens space key value setting the width of the parent element. |
onChange | ChangeEventHandler<HTMLInputElement> | - | The handler for change events. |
onBlur | FocusEventHandler<HTMLInputElement> | - | The handler for blur events. |
onFocus | FocusEventHandler<HTMLInputElement> | - | The handler for focus events. |