# Fader

A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.

Kit part · With the Kit · https://tactileui.dev/parts/fader

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

A native range with its track and thumb styled through the WebKit and Mozilla pseudo-elements. The slot is the well fill with a short inset shadow. The scale is two repeating gradients.

## Variants

- Horizontal with scale
- Vertical · channels

## States

- Low
- Middle
- High
- Focus

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-material | attribute | What the cap and its printed line are made of, apart from the page’s finish. The slot and the scale are the plate’s and keep the finish. On the fader or on its device. Anodised blue and green go on a whole device only. |
| min · max · step · value | attribute | Native. Make the step what the value can really be. |
| input · change | event | Native: input while moving, change on release. |
| Arrows · PageUp/PageDown · Home/End | keyboard | Native range behaviour. |

## Usage notes

Drag a cap, or focus it and use the arrow keys, Page Up/Down, Home and End.

## Accessibility

- The focus ring draws on the cap.
- Keyboard: a native range input.

## Related parts

- [Knob](https://tactileui.dev/parts/knob): A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.
- [Ladder](https://tactileui.dev/parts/ladder): An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read.
- [Stepper](https://tactileui.dev/parts/stepper): A small integer with − and + keys either side, in one well.