@asphalt-react/slider v2.5.0

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.

brand

Applies brand intent.

accent

Applies accent intent.

stretch

Applies stretch styles.

min

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

max

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

value

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

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.

onChange

Callback function for slider value changes.

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

onError

Callback function for slider value errors.

onError = (error) => {}

disabled

Disables the slider.

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"}]