### File

`packages/components/eui-slider/eui-slider.component.ts`

### Description

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

Example :

    <!-- 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" />

Example :

    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"

### Implements

`ControlValueAccessor` `AfterViewInit` `OnDestroy` `OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiDanger euiVariant
selector | `eui-slider`
imports | `DragDropModule`
styleUrls | `./eui-slider.scss`
templateUrl | `./eui-slider.component.html`

### Index

###### Properties

- Public constrainPosition
- endHandler
- endHandlerContainer
- endInputRange
- handlers
- Public initValue
- inputRanges
- Public isDisabled
- sliderContainer
- startHandler
- startHandlerContainer
- startInputRange
- Public ticks
- trackActive

###### Methods

- Public onDragEnded
- Public onDragMoved
- Public onTrackClick
- registerOnChange
- registerOnTouched
- setDisabledState
- writeValue

###### Inputs

- ariaLabel
- endAriaLabel
- formatValue
- hasRange
- hasTicks
- hasTooltip
- hasValueIndicator
- maxValue
- minValue
- sliderId
- step
- value

###### Outputs

- value

###### HostBindings

- class

###### Accessors

- cssClasses
- formattedStartValue
- formattedEndValue

### Constructor

`constructor()`

### Inputs

ariaLabel
Default value : `'eUI slider'`
The label for the slider, used for accessibility.

endAriaLabel
Default value : `'end eUI slider'`
The label for the end slider in case there is a range, used for accessibility.

formatValue
Type : `(value: number) => string`
Default value : `(value: number) => `${value}`,`
Method that allows to format the value display.

hasRange
Default value : `false, { transform: booleanAttribute }`
Wheter a second should be display to allow to select a range.

hasTicks
Default value : `false, { transform: booleanAttribute }`
Wheter a ticks should be displayed at each step interval.

hasTooltip
Default value : `true, { transform: booleanAttribute }`
Wheter a tooltip should be displayed when the handlers are hovered.

hasValueIndicator
Default value : `true, { transform: booleanAttribute }`
Wheter the value should be displayed on the top right of the track.

maxValue
Default value : `100, { alias: 'max', transform: numberAttribute }`
The greatest value in the range of permitted values.

minValue
Default value : `0, { alias: 'min', transform: numberAttribute }`
The lowest value in the range of permitted values.

sliderId
Default value : ``eui-slider-${uniqueId()}``
The unique identifier for the slider. This is used for accessibility and to link the slider with its label.

step
Default value : `1, { transform: numberAttribute }`
Number that specifies the granularity that the value must adhere to.

value
Type : `IEuiSliderValues`
Default value : `{ start: 0, end: 100 }`
Initial value used by the slider.

### Outputs

value
Type : `IEuiSliderValues`
Initial value used by the slider.

### HostBindings

class
Type : `string`
Computes and returns the CSS classes for the component based on its current state.

### Methods

Public onDragEnded
`onDragEnded(e: CdkDragEnd)`

Drag end handler

Parameters :

Name | Type | Optional
e | `CdkDragEnd` | No

Returns : `void`

Public onDragMoved
`onDragMoved(handlerId: SliderHandler, e: CdkDragMove)`

Drag handler

Parameters :

Name | Type | Optional | Description
handlerId | `SliderHandler` | No | Dragged handler
e | `CdkDragMove` | No | Event

Returns : `void`

Public onTrackClick
`onTrackClick(e: MouseEvent)`

Click on track handler

Parameters :

Name | Type | Optional | Description
e | `MouseEvent` | No | Click event

Returns : `void`

registerOnChange
`registerOnChange(fn: any)`

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

setDisabledState
`setDisabledState(isDisabled: boolean)`

Parameters :

Name | Type | Optional
isDisabled | `boolean` | No

Returns : `void`

writeValue
`writeValue(value: IEuiSliderValues)`

Parameters :

Name | Type | Optional
value | `IEuiSliderValues` | No

Returns : `void`

### Properties

Public constrainPosition
Type : `unknown`
Default value : `() => {...}`
Constrains the position of a handler to the position of the other one. Start handler cannot go after end handler. End handler cannot go before start handler.

Parameters :

Name | Description
handlerId | `Dragged handler`

endHandler
Type : `ElementRef`
Decorators : `@ViewChild('endHandler', {static: false})`

endHandlerContainer
Type : `ElementRef`
Decorators : `@ViewChild('endHandlerContainer', {static: false})`

endInputRange
Type : `ElementRef`
Decorators : `@ViewChild('endInputRange', {static: false})`

handlers
Type : `QueryList<ElementRef>`
Decorators : `@ViewChildren('handler')`

Public initValue
Type : `literal type`
Default value : `{ start: { x: 0, y: 0 }, end: { x: 0, y: 0 }, }`

inputRanges
Type : `QueryList<ElementRef>`
Decorators : `@ViewChildren('inputRange')`

Public isDisabled
Type : `unknown`
Default value : `false`

sliderContainer
Type : `ElementRef`
Decorators : `@ViewChild('sliderContainer', {static: true})`

startHandler
Type : `ElementRef`
Decorators : `@ViewChild('startHandler', {static: false})`

startHandlerContainer
Type : `ElementRef`
Decorators : `@ViewChild('startHandlerContainer', {static: false})`

startInputRange
Type : `ElementRef`
Decorators : `@ViewChild('startInputRange', {static: false})`

Public ticks
Type : `literal type[]`
Default value : `[]`

trackActive
Type : `ElementRef`
Decorators : `@ViewChild('trackActive', {static: false})`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

formattedStartValue
get `formattedStartValue()`

formattedEndValue
get `formattedEndValue()`

# results matching ""

# No results matching ""