# Slider

<Badge variant="neutral">Form component</Badge>

The Slider component allows users to select a numeric value from a range by dragging a thumb along a track. It provides an intuitive way to input values that fall within a specific range.

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`

## Examples

### With Label

### Without Value Label

### Custom Value Formatting

### Vertical Orientation

### Disabled State

## Properties

- **`value`** `number` — The current value in controlled mode
- **`defaultValue`** `number` — The default value in uncontrolled mode
- **`minValue`** `number` (default: `0`) — The minimum allowed value
- **`maxValue`** `number` (default: `100`) — The maximum allowed value
- **`step`** `number` (default: `1`) — The step increment between values
- **`orientation`** `'horizontal' | 'vertical'` (default: `'horizontal'`) — The orientation of the slider
- **`gradation`** `string[]` — Labels for gradation marks along the track
- **`showValueLabel`** `boolean` — Whether the value label is displayed (defaults to `true` when `label` is present)
- **`getValueLabel`** `(value: number) => string` — Custom function to format the value label
- **`formatOptions`** `Intl.NumberFormatOptions` — Number format options for the value label display
- **`inputWidth`** `string` — Width of the input area
- **`trackStyles`** `Styles` — Custom styles for the track element
- **`thumbStyles`** `Styles` — Custom styles for the thumb element
- **`thumbTokens`** `Tokens` — Custom tokens for the thumb element (e.g., `#slider-thumb` for fill color)
- **`inputStyles`** `Styles` — Custom styles for the input element
- **`onChange`** `(value: number) => void` — Callback fired when the value changes during drag
- **`onChangeEnd`** `(value: number) => void` — Callback fired when the value changes on drag end

### Base Properties

Supports [Base properties](../../BaseProperties.md)

### Field Properties

Supports all [Field properties](../../FieldProperties.md)

## Sub-elements

The Slider component renders the following sub-elements that can be customized via the `styles` prop:

- **SliderControls**: The container for the track and thumb
- **SliderTrackContainer**: The track background and range fill
- **SliderThumb**: The draggable thumb element
- **SliderGradation**: Container for gradation marks
- **SliderGrade**: Individual gradation mark

## Style Properties

The Slider component supports all standard style properties:

`display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `reset`, `padding`, `paddingInline`, `paddingBlock`, `shadow`, `border`, `radius`, `overflow`, `scrollbar`, `outline`, `textAlign`, `color`, `fill`, `fade`, `textTransform`, `fontWeight`, `fontStyle`, `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Accessibility

The Slider component follows WAI-ARIA guidelines:

- Uses appropriate ARIA roles and properties for slider interaction
- Supports keyboard navigation with arrow keys
- Provides clear focus indicators
- Associates labels with the input element
- Includes proper value announcements for screen readers

## Best Practices

- Use descriptive labels that clearly indicate what the slider controls
- Consider providing gradation marks for better value reference
- Set appropriate min, max, and step values for your use case
- Use custom value formatting when the raw numeric value isn't user-friendly
- Consider the orientation based on your layout and user expectations
