Slider
Component that lets the user pick an amount by sliding a button.
Import
JSX
Usage
JSX
Return value
If connected via the value prop and setValue prop, Slider returns a number
containing the current value.
Variants
Description
JSX
Units
JSX
No Label
JSX
Disabled
JSX
Connect to parent
It is possible to receive the value from Slider in the parent component
by providing the value prop and setValue prop as shown below.
JSX
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | - | id of slider input |
name* | string | - | name of slider input |
min* | number | 0 | minimum value of the input |
max* | number | 100 | maximum value of the input |
value | number | min | current value of the input |
setValue | (number) => void | - | callback function that updates the current value in the parent |
label | string | - | Label above the range input |
description | string | "" | displays a description about the input |
disabled | boolean | false | disables/enables range input |
required | boolean | false | Forces user to fill in the input |
unit | string | - | unit of the value in the range input |
width | string | 15rem | sets the width of the input |
step | string | 1 | step size of the slider |
showValue | boolean | true | Toggles showing the value |