eui documentation
  1. Components
  2. EuiSliderComponent

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
Methods
Inputs
Outputs
HostBindings
Accessors

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
getcssClasses()

Computes and returns the CSS classes for the component based on its current state.

Returns : string
formattedStartValue
getformattedStartValue()
formattedEndValue
getformattedEndValue()

results matching ""

    No results matching ""