### File

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

### Implements

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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiDanger euiVariant
selector | `eui-slider`
imports | `DragDropModule`
styleUrls | `./styles/_index.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 max min sliderId step value
###### HostBindings
class
###### Accessors
cssClasses formattedStartValue formattedEndValue

### Constructor

`constructor()`

### Inputs

ariaLabel
Type : `string`
Default value : `'eUI slider'`

endAriaLabel
Type : `string`
Default value : `'end eUI slider'`

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

hasRange
Type : `boolean`
Default value : `false`
Wheter a second should be display to allow to select a range.

hasTicks
Type : `boolean`
Default value : `false`
Wheter a ticks should be displayed at each step interval.

hasTooltip
Type : `boolean`
Default value : `true`
Wheter a tooltip should be displayed when the handlers are hovered.

hasValueIndicator
Type : `boolean`
Default value : `true`
Wheter the value should be displayed on the top right of the track.

max
Type : `number`
Default value : `100`
The greatest value in the range of permitted values.

min
Type : `number`
Default value : `0`
The lowest value in the range of permitted values.

sliderId
Type : `string`
Default value : ``eui-slider-${uniqueId()}``

step
Type : `number`
Default value : `1`
Number that specifies the granularity that the value must adhere to.

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

### HostBindings

class
Type : `string`

### 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
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
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 ""