# EuiSliderComponent

**Type:** component



A draggable slider component for selecting numeric values within a defined range.
Supports both single-value and range selection modes with keyboard navigation,
visual feedback through tooltips and ticks, and full accessibility support.
Implements ControlValueAccessor for seamless integration with Angular forms.

Use cases:
- Single value selection within a numeric range
- Range selection with start and end values
- Form-integrated numeric input with visual feedback
- Accessible numeric input for keyboard and screen reader users

### Basic Usage
```html
<!-- Single value slider -->
<eui-slider
  [min]="0"
  [max]="100"
  [step]="5"
  [(value)]="sliderValue" />

<!-- Range slider -->
<eui-slider
  [min]="0"
  [max]="1000"
  [hasRange]="true"
  [hasTicks]="true"
  [(value)]="rangeValue" />

<!-- With custom formatting -->
<eui-slider
  [formatValue]="formatPrice"
  [(value)]="price" />
```

```typescript
sliderValue = { start: 50, end: null };
rangeValue = { start: 200, end: 800 };
formatPrice = (value: number) => `$${value}`;
```

### Accessibility
- Keyboard navigation: Arrow keys to adjust, Home/End for min/max
- Provide descriptive ariaLabel for the slider purpose
- Use endAriaLabel for range sliders to distinguish handles
- Focus indicators show which handle is active

### Notes
- Value structure: { start: number, end?: number | null }
- Range mode requires hasRange="true" and both start/end values
- Ticks display at each step interval when hasTicks="true"
- Tooltip shows current value on hover when hasTooltip="true"


**Selector:** `eui-slider`

## Inputs
- **ariaLabel**: `undefined` - The label for the slider, used for accessibility.
- **endAriaLabel**: `undefined` - The label for the end slider in case there is a range, used for accessibility.
- **formatValue**: `(value: number) => string` - Method that allows to format the value display.
- **hasRange**: `undefined` - Wheter a second should be display to allow to select a range.
- **hasTicks**: `undefined` - Wheter a ticks should be displayed at each step interval.
- **hasTooltip**: `undefined` - Wheter a tooltip should be displayed when the handlers are hovered.
- **hasValueIndicator**: `undefined` - Wheter the value should be displayed on the top right of the track.
- **maxValue**: `undefined` - The greatest value in the range of permitted values.
- **minValue**: `undefined` - The lowest value in the range of permitted values.
- **sliderId**: `undefined` - The unique identifier for the slider. This is used for accessibility and to link the slider with its label.
- **step**: `undefined` - Number that specifies the granularity that the value must adhere to.
- **value**: `IEuiSliderValues` - Initial value used by the slider.
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **value**: `IEuiSliderValues` - Initial value used by the slider.