Slider
The <Slider> is a form component that allows users to quickly select a value within a range. They should be used when the upper and lower bounds of the range are known and static.
For accessibility reasons you can use the left and right arrow keys on your keyboard to select a value.
Import
import { Slider } from '@marigold/components';Appearance
Sorry! There are currently no variants and sizes available.
Props
| Property | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | If true, the slider is disabled. |
value | number[] | none | The slider's value (controlled). |
defaultValue | number[] | none | The slider's default value (uncontrolled). |
maxValue | number | 100 | The slider's maximum value. |
step | number | none | The slider's step value. |
formatOptions | Intl.NumberFormatOptions | none | Set the format for the slider. E.g. percent |
width | string | number | full | Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width |
... | | - | Yes you can use all regular attributes of input type = range! |
Examples
Width
Here you can see a <Slider> with a smaller width than the default.
Disabled
You can also disable the <Slider> if you want user not to select a value.
Step
This example shows how to use the step property. The value is set in steps of 10.
Max value
If you want to use a other maxValue than 100. You can set the property and change it to the value you want.
Value (controlled)
This example shows how to build a controlled <Slider>. The value prop together with the onChange prop are used to update and set the current value. The default value in the example is set to "75", if you manually change the value it will be updated. If you want an uncontrolled <Slider> see the next example.
Default Value (uncontrolled)
If you just set the defaultValue property, your <Slider> will be uncontrolled. In this case you don't have an onChange event. If you want a controlled <Slider> see the example above.
Format Options
In this example you can see which format the <Slider> can have. You can use all NumberFormatOptions for that.