Slider

<afp-slider>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A slider component that lets users select a numeric value within a range.

<afp-slider value="50" hidelabel></afp-slider>

<afp-slider [value]=50 hidelabel></afp-slider>

<AfpSlider value="50" hidelabel></AfpSlider>

<AfpSlider :value=50 hidelabel></AfpSlider>

Examples #

Shapes #

Use the shape property to customize the slider’s thumb and track appearance.

<div class="afp-grid afp-align-center">
  <afp-slider label="Pill" shape="pill" value="25"></afp-slider>
  <afp-slider label="Rounded" shape="rounded" value="25"></afp-slider>
  <afp-slider label="Soft" shape="soft" value="25"></afp-slider>
  <afp-slider label="Square" shape="square" value="25"></afp-slider>
</div>

<div class="afp-grid afp-align-center">
  <afp-slider [label]="'Pill'" [shape]="'pill'" [value]=25></afp-slider>
  <afp-slider [label]="'Rounded'" [shape]="'rounded'" [value]=25></afp-slider>
  <afp-slider [label]="'Soft'" [shape]="'soft'" [value]=25></afp-slider>
  <afp-slider [label]="'Square'" [shape]="'square'" [value]=25></afp-slider>
</div>

<div class="afp-grid afp-align-center">
  <AfpSlider label="Pill" shape="pill" value="25"></AfpSlider>
  <AfpSlider label="Rounded" shape="rounded" value="25"></AfpSlider>
  <AfpSlider label="Soft" shape="soft" value="25"></AfpSlider>
  <AfpSlider label="Square" shape="square" value="25"></AfpSlider>
</div>

<div class="afp-grid afp-align-center">
  <AfpSlider :label="'Pill'" :shape="'pill'" :value=25></AfpSlider>
  <AfpSlider :label="'Rounded'" :shape="'rounded'" :value=25></AfpSlider>
  <AfpSlider :label="'Soft'" :shape="'soft'" :value=25></AfpSlider>
  <AfpSlider :label="'Square'" :shape="'square'" :value=25></AfpSlider>
</div>

Sizes #

Use the size property to customize the slider’s thumb and track size.

<div class="afp-grid afp-align-center">
  <afp-slider size="small" value="50" hidelabel></afp-slider>
  <afp-slider size="medium" value="50" hidelabel></afp-slider>
  <afp-slider size="large" value="50" hidelabel></afp-slider>
</div>

<div class="afp-grid afp-align-center">
  <afp-slider [size]="'small'" [value]=50 hidelabel></afp-slider>
  <afp-slider [size]="'medium'" [value]=50 hidelabel></afp-slider>
  <afp-slider [size]="'large'" [value]=50 hidelabel></afp-slider>
</div>

<div class="afp-grid afp-align-center">
  <AfpSlider size="small" value="50" hidelabel></AfpSlider>
  <AfpSlider size="medium" value="50" hidelabel></AfpSlider>
  <AfpSlider size="large" value="50" hidelabel></AfpSlider>
</div>

<div class="afp-grid afp-align-center">
  <AfpSlider :size="'small'" :value=50 hidelabel></AfpSlider>
  <AfpSlider :size="'medium'" :value=50 hidelabel></AfpSlider>
  <AfpSlider :size="'large'" :value=50 hidelabel></AfpSlider>
</div>

With prefix & suffix #

Use the prefix and suffix slots to place icons or text on either side of the slider.

<afp-slider label="Volume" min="0" max="100" value="35">
  <afp-icon slot="prefix" name="volume-down"></afp-icon>
  <afp-icon slot="suffix" name="volume-up"></afp-icon>
</afp-slider>

<afp-slider [label]="'Volume'" [min]=0 [max]=100 [value]=35>
  <afp-icon [slot]="'prefix'" [name]="'volume-down'"></afp-icon>
  <afp-icon [slot]="'suffix'" [name]="'volume-up'"></afp-icon>
</afp-slider>

<AfpSlider label="Volume" min="0" max="100" value="35">
  <AfpIcon slot="prefix" name="volume-down"></AfpIcon>
  <AfpIcon slot="suffix" name="volume-up"></AfpIcon>
</AfpSlider>

<AfpSlider :label="'Volume'" :min=0 :max=100 :value=35>
  <AfpIcon :slot="'prefix'" :name="'volume-down'"></AfpIcon>
  <AfpIcon :slot="'suffix'" :name="'volume-up'"></AfpIcon>
</AfpSlider>

Use the tooltip property to show the current value in a tooltip. The placement property can be used to set the position of the tooltip relative to the slider thumb.

<div class="afp-stack">
  <afp-slider label="Top (default)" value="30" tooltip placement="top"></afp-slider>
  <afp-slider label="Bottom" value="60" tooltip placement="bottom"></afp-slider>
  <afp-slider label="Left" value="40" tooltip placement="left"></afp-slider>
  <afp-slider label="Right" value="80" tooltip placement="right"></afp-slider>
</div>

<div class="afp-stack">
  <afp-slider [label]="'Top (default)'" [value]=30 tooltip [placement]="'top'"></afp-slider>
  <afp-slider [label]="'Bottom'" [value]=60 tooltip [placement]="'bottom'"></afp-slider>
  <afp-slider [label]="'Left'" [value]=40 tooltip [placement]="'left'"></afp-slider>
  <afp-slider [label]="'Right'" [value]=80 tooltip [placement]="'right'"></afp-slider>
</div>

<div class="afp-stack">
  <AfpSlider label="Top (default)" value="30" tooltip placement="top"></AfpSlider>
  <AfpSlider label="Bottom" value="60" tooltip placement="bottom"></AfpSlider>
  <AfpSlider label="Left" value="40" tooltip placement="left"></AfpSlider>
  <AfpSlider label="Right" value="80" tooltip placement="right"></AfpSlider>
</div>

<div class="afp-stack">
  <AfpSlider :label="'Top (default)'" :value=30 tooltip :placement="'top'"></AfpSlider>
  <AfpSlider :label="'Bottom'" :value=60 tooltip :placement="'bottom'"></AfpSlider>
  <AfpSlider :label="'Left'" :value=40 tooltip :placement="'left'"></AfpSlider>
  <AfpSlider :label="'Right'" :value=80 tooltip :placement="'right'"></AfpSlider>
</div>

Hint #

Use the hint property to provide supporting helper text below the slider.

<afp-slider
  label="Volume"
  value="40"
  hint="Drag the slider to adjust the volume level."
></afp-slider>

<afp-slider
  [label]="'Volume'"
  [value]=40
  [hint]="'Drag the slider to adjust the volume level.'"
></afp-slider>

<AfpSlider
  label="Volume"
  value="40"
  hint="Drag the slider to adjust the volume level."
></AfpSlider>

<AfpSlider
  :label="'Volume'"
  :value=40
  :hint="'Drag the slider to adjust the volume level.'"
></AfpSlider>

Show Value #

Enable the showValue (showvalue) property to display the current slider value next to the control.

<afp-slider label="Maximum Price" value="20" showvalue></afp-slider>

<afp-slider [label]="'Maximum Price'" [value]=20 showvalue></afp-slider>

<AfpSlider label="Maximum Price" value="20" showvalue></AfpSlider>

<AfpSlider :label="'Maximum Price'" :value=20 showvalue></AfpSlider>

Disabled #

Use the disabled property to disable the slider and prevent user interaction.

<afp-slider label="Opacity" value="50" disabled></afp-slider>

<afp-slider [label]="'Opacity'" [value]=50 disabled></afp-slider>

<AfpSlider label="Opacity" value="50" disabled></AfpSlider>

<AfpSlider :label="'Opacity'" :value=50 disabled></AfpSlider>

Invalid #

Use the invalid property to place the slider into an error state and show a validation message.

<afp-slider
  label="Age"
  min="0"
  max="120"
  value="30"
  invalid="Please select a valid age."
></afp-slider>

<afp-slider
  [label]="'Age'"
  [min]=0
  [max]=120
  [value]=30
  [invalid]="'Please select a valid age.'"
></afp-slider>

<AfpSlider
  label="Age"
  min="0"
  max="120"
  value="30"
  invalid="Please select a valid age."
></AfpSlider>

<AfpSlider
  :label="'Age'"
  :min=0
  :max=120
  :value=30
  :invalid="'Please select a valid age.'"
></AfpSlider>

Properties

Learn more about properties.

Name Description Reflects

thumbId

Unique thumb marker ID for tooltip anchoring

Default `afp-slider-thumb-${id}`

label

Label above the Slider

Type string

hideLabel
hidelabel

hides the label visually

Type boolean

value

Current slider value

Type number

Default 0

min

Lower bound of the slider.

Type number

Default 0

max

Upper bound of the slider.

Type number

Default 100

step

Step granularity.

Type number

Default 1

disabled

Disables slider interaction.

Type boolean

Default false

required

Mark slider as required.

Type boolean

invalid

Error message to display below the slider.

Type string

shape

shape of the slider thumb and track

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.CIRCLE

size

size of the Slider

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

showValue
showvalue

Show current numeric value next to the slider.

Type boolean

Default false

tooltip

Show tooltip above the slider thumb.

Type boolean

Default false

placement

Placement of the tooltip relative to the slider thumb.

Type

AfpPlacement

Name	Description
`TOP`	Top placement.
`RIGHT`	Right placement.
`BOTTOM`	Bottom placement.
`LEFT`	Left placement.
`TOP_START`	Top-start placement.
`TOP_END`	Top-end placement.
`RIGHT_START`	Right-start placement.
`RIGHT_END`	Right-end placement.
`BOTTOM_START`	Bottom-start placement.
`BOTTOM_END`	Bottom-end placement.
`LEFT_START`	Left-start placement.
`LEFT_END`	Left-end placement.

AfpPlacement

Default AfpPlacement.TOP

hint

hint footer property of slider

Type string

Events

Learn more about events.

Name	Return	Description
`afp-value-changed`	`number`	Emitted when the slider value changes.

Slots

Learn more about slots.

Name	Description
`default`	The default slot.
`label`	A label placed above the slider
`prefix`	Content displayed before the slider
`suffix`	Content displayed after the slider.

Internationalization

Learn more about internationalization.

Key	Description
`slider.aria-label`	Default ARIA label used when no `label` property is set.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	Wrapper for the entire component.	`::part(base)`
`container`	Contains track, thumb, prefix/suffix.	`::part(container)`
`value`	Static value label (when `showValue` is enabled).	`::part(value)`
`error`	Error message container.	`::part(error)`
`hint`	The hint text element displayed below the slider.	`::part(hint)`
`label-base`	The label container.	`::part(label-base)`
`label`	The label element.	`::part(label)`
`wrapper`	Wrapper for the input element and thumb marker.	`::part(wrapper)`
`input`	The native range input element.	`::part(input)`
`marker`	The thumb marker element.	`::part(marker)`
`tooltip`	The tooltip element.	`::part(tooltip)`

CSS Custom Properties

Name	Description	Default
`--afp-slider-track-bg`	Background color of the slider track.	`--afp-color-surface-elevated`
`--afp-slider-track-fill`	Fill color of the slider track.	`--afp-color-neutral-fill-loud`
`--afp-slider-disabled-opacity`	Opacity applied to the slider when disabled.	`0.5`
`--afp-input-error-label-color`	The color of the label in the error state.	`--afp-color-error-600`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

Component	CSS Part Prefix
afp-icon	`icon` - The icon component.
afp-tooltip	`tooltip` - The tooltip element.

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/slider/slider.js';

Slider

Examples #

Shapes #

Sizes #

With prefix & suffix #

Tooltip #

Hint #

Show Value #

Disabled #

Invalid #

Properties

Events

Slots

Internationalization

CSS Parts

CSS Custom Properties

Dependencies

Importing