# EuiSliderComponent

**Type:** component

<p>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.</p>
<p>Use cases:</p>
<ul>
<li>Single value selection within a numeric range</li>
<li>Range selection with start and end values</li>
<li>Form-integrated numeric input with visual feedback</li>
<li>Accessible numeric input for keyboard and screen reader users</li>
</ul>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Single value slider --&gt;
&lt;eui-slider
  [min]=&quot;0&quot;
  [max]=&quot;100&quot;
  [step]=&quot;5&quot;
  [(value)]=&quot;sliderValue&quot; /&gt;

&lt;!-- Range slider --&gt;
&lt;eui-slider
  [min]=&quot;0&quot;
  [max]=&quot;1000&quot;
  [hasRange]=&quot;true&quot;
  [hasTicks]=&quot;true&quot;
  [(value)]=&quot;rangeValue&quot; /&gt;

&lt;!-- With custom formatting --&gt;
&lt;eui-slider
  [formatValue]=&quot;formatPrice&quot;
  [(value)]=&quot;price&quot; /&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">sliderValue = { start: 50, end: null };
rangeValue = { start: 200, end: 800 };
formatPrice = (value: number) =&gt; `$${value}`;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Keyboard navigation: Arrow keys to adjust, Home/End for min/max</li>
<li>Provide descriptive ariaLabel for the slider purpose</li>
<li>Use endAriaLabel for range sliders to distinguish handles</li>
<li>Focus indicators show which handle is active</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Value structure: { start: number, end?: number | null }</li>
<li>Range mode requires hasRange=&quot;true&quot; and both start/end values</li>
<li>Ticks display at each step interval when hasTicks=&quot;true&quot;</li>
<li>Tooltip shows current value on hover when hasTooltip=&quot;true&quot;</li>
</ul>


**Selector:** `eui-slider`

**Standalone:** false

## Inputs

- **ariaLabel**: `undefined` - <p>The label for the slider, used for accessibility.</p>

- **endAriaLabel**: `undefined` - <p>The label for the end slider in case there is a range, used for accessibility.</p>

- **formatValue**: `(value: number) => string` - <p>Method that allows to format the value display.</p>

- **hasRange**: `undefined` - <p>Wheter a second should be display to allow to select a range.</p>

- **hasTicks**: `undefined` - <p>Wheter a ticks should be displayed at each step interval.</p>

- **hasTooltip**: `undefined` - <p>Wheter a tooltip should be displayed when the handlers are hovered.</p>

- **hasValueIndicator**: `undefined` - <p>Wheter the value should be displayed on the top right of the track.</p>

- **maxValue**: `undefined` - <p>The greatest value in the range of permitted values.</p>

- **minValue**: `undefined` - <p>The lowest value in the range of permitted values.</p>

- **sliderId**: `undefined` - <p>The unique identifier for the slider.
This is used for accessibility and to link the slider with its label.</p>

- **step**: `undefined` - <p>Number that specifies the granularity that the value must adhere to.</p>

- **value**: `IEuiSliderValues` - <p>Initial value used by the slider.</p>


## Outputs

- **value**: `IEuiSliderValues` - <p>Initial value used by the slider.</p>

