Slider

Slider allows users to select a value from a range by dragging the thumb along a track. You can set the min, max, and configure the steps.

Usage

Usually Slider appears inside forms, filters, or other input elements where a range selection is needed.

import { Slider } from "@asphalt-react/slider"

 <Slider value={10} />

Intents

Slider support 3 intents:

• Brand (Default)
• Neutral
• Accent

Accessibility

• Slider thumb is in the page tab sequence and has the keyboard interactions as described in Slider Pattern.
• Slider has the ARIA "slider" role.
• It has the "aria-valuenow" property set to a value representing the current value.
• It has the "aria-valuemin" property set to a value representing the minimum allowed value.
• It has the "aria-valuemax" property set to a decimal value representing the maximum allowed value.

Props

neutral

Applies neutral intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

brand

Applies brand intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

accent

Applies accent intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

stretch

Applies stretch styles.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

min

Minimum value of the slider. Must be less than max.

| type | required | default | | ------ | -------- | ------- | | number | false | 0 |

max

Maximum value of the slider. Must be greater than min.

| type | required | default | | ------ | -------- | ------- | | number | false | 100 |

value

Value of the slider. Must be between min and max.

| type | required | default | | ------ | -------- | ------- | | number | true | N/A |

step

Step increment of the slider. Must be greater than 0 or any. If the value is not a multiple of step, it will be rounded to the nearest valid value. If set to a number, the slider will move in fixed increments. If set to any, the slider allows any decimal or whole number within the range.

| type | required | default | | ----- | -------- | ------- | | union | false | 1 |

onChange

Callback function for slider value changes.

onChange = (value, { event }) => {}

| type | required | default | | ---- | -------- | ------- | | func | false | N/A |

onError

Callback function for slider value errors.

onError = (error) => {}

| type | required | default | | ---- | -------- | ------- | | func | false | N/A |

disabled

Disables the slider.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

markers

Array of markers to display below the slider. Each mark should have a value and label property.

markers = [{ value: 0, label: "0", value: 100, label: "100"}]

| type | required | default | | ------- | -------- | ------- | | arrayOf | false | null |