---
tags: specs
---

# Slider Component Specification

## API

#### Properties and Attributes

| Name | Value | Description |
| ---- | ----- | ----------- |
| min | number | The minimum value that can be used in the range. |
| max | number | The minimum value that can be used in the range. |
| step | number \| number[] | The amount by which the values between min and max increase or decrease by. If an array is provided those will be the only steps included. So [1, 10, 90] would have selectable steps at 1, 10, and 90. |
| marks | `{key: number, text: string}[]` | Indicates the marks that should be labeled. Should the key corresponds to value on the line. TODO it feels like there should be a better way to connect marks with steps, especially since step can take array. |
| range | boolean | If true, 2 thumbs will be provided with the track filling in the distance between them |
| origin | number \| null | Indicates which step the track should originate from. Defaults to the min value. If null is provided, track will be turned off. If range is true, a track with number has no effect. |
| value | number \| number[] | For controlling the value of the slider. If a second value is provided it will control the second thumb |
| defaultValue | number \| number[]| the initial starting value of the thumb on the slider. If 2 values are provided the second value will be used to place the second thumb. |
| vertical | boolean | If true then the slider should be vertical rather than horizontal. |

#### Methods
| Name | Description |
| ---- | ----------- |
| `focus: () => void` | Focuses the slider. TODO, should focus be allowed to specify which thumb receives focus? |

#### Events
| Name | Value | Description |
| ---- | ----- | ----------- |
| `onChange` | `(ev: ReactEvent, sliderData: {value: number | number[]}) => void` | Needs discussion |

## Accessibility

#### Keyboard behavior
| Name | Behavior |
| ---- | -------- |
| Tab stops | Thumbs should be tab stops. If there are 2 thumbs, tabbing should tab to the "min" (leftmost in RTL) thumb first, then the "max" (rightmost) thumb second. If the thumbs switch position via dragging, tab order should be maintained as the "min" |
| Left | When thumb is selected and slider is horizontal, moves the thumb to the left 1 step. Shift + left will move the thumb left 10 times the step |
| Right | When thumb is selected and slider is horizontal, moves the thumb to the right 1 step. Shift + right will move the thumb right 10 times the step |
| Up | When thumb is selected and slider is vertical, moves the thumb up 1 step. Shift + up will move the thumb up 10 times the step |
| Down | When thumb is selected and slider is vertical, moves the thumb down 1 step. Shift + down will move the thumb down 10 times the step |
| PageUp | Increase value by 10 times step. Behaves as shift up/right. (Taken from [this](https://github.com/microsoft/fluentui/blob/master/specs/Slider.md))|
| PageDown | Decreases value by 10 times step. Behaves as shift down/left. (Taken from [this](https://github.com/microsoft/fluentui/blob/master/specs/Slider.md)) |
| Home | Reduces the value to the amount specified by the min prop. (Taken from [this](https://github.com/microsoft/fluentui/blob/master/specs/Slider.md))|
| End | Increases the value to the amount specified in the max prop. (Taken from [this](https://github.com/microsoft/fluentui/blob/master/specs/Slider.md))|

#### Screenreader notes

* Marks need to be read out when the currently focused thumb is moved to the corresponding step/tick.
* Screen reader should announce if the slider is vertical.
* Current value needs to be read out and change as the thumb is moving, regardless of whether or not it's being moved by mouse click or keyboarding.

## Appearance
(Link to design document)

#### Anatomy

<Root>
    <Rail/>
    // Track will be the "fill in color"
    // TODO, should marks be directly part of the track, or a separate entity controlled by the slider?
    <Track/>
    <Thumb/>
    <Thumb/>
</Root>

#### DOM Structure

<div>
    // Rail
    <div>
    </div>
    // Track
    <div>
    </div>
    // Marks
    <div>
        // Tick
        <div>
        </div>
        // Label
        <div>
        </div>
    </div>
    // Thumb 1
    <div>
    </div>
    // Thumb 2
    <div>
    </div>
</div>

### Tokens

| Name | Notes |
| ---- | ----- |
| rootBorderColor | |
| rootBorderFocusedColor | |
| rootBorderHoveredColor | |
| railSize | |
| railColor | |
| railColorFocused | Should "Active" be used instead? |
| railColorDisabled | |
| railColorPressed | |
| railColorHovered | |
| trackSize | |
| trackColor | |
| trackColorFocused | Should "Active" be used instead? |
| trackColorDisabled | |
| trackColorPressed | |
| trackColorHovered | |
| thumbColor | |
| thumbColorFocused | Should "Active" be used instead? |
| thumbColorDisabled | |
| thumbColorPressed | |
| thumbColorHovered | |
| markWidth | |
| markHeight | |
| markColor | |
| markColorSelected | |
| markColorDisabled | |
| markLabelColor | |
| markLabelColorDisabled | |
| markLabelColorSelected | |

## Slots
### Root
The part of slider that contains all of the other pieces

### Track
The part of the slider that all other parts appear to move on or fill

### Rail
The filled in part of the slider indicating the selected range. May not be present if it's discrete

### Thumb
The interactable part of the track, can be clicked on and dragged. There may be one or two thumbs depending on the type. It's important to not interfere with onClick/onMouseDown/onMouseUp since those might be used by consuming components.

### Mark
The visible mark that contains a label and a potential tick.